javascript 如何使用 jQuery 将页面重定向到 iframe
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19562627/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to redirect page into iframe using jQuery
提问by RoyalSwish
On my website I have a jQuery script which fades in the body of page, and then when a user clicks on a relative link the body fades out and redirects the user to the new page and the script then starts again.
在我的网站上，我有一个 jQuery 脚本，它在页面正文中淡出，然后当用户单击相对链接时，正文淡出并将用户重定向到新页面，然后脚本再次启动。
My colleague advised me it would be better to have the main content put into an iframe in order to stop having the whole body refreshing when changing pages, but the problem is that when a user clicks on a relative link the iframe fades out but instead of the new page targeting the iframe it just opens up the page.
我的同事建议我最好将主要内容放入 iframe 以便在更改页面时停止整个正文刷新，但问题是当用户单击相关链接时 iframe 淡出而不是针对 iframe 的新页面只是打开页面。
How do I fix this? I think the error occurs after the line $("body").fadeIn(2000);.
我该如何解决？我认为错误发生在行之后$("body").fadeIn(2000);。
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("body").css("display", "none");
$("body").fadeIn(2000);
$(".transition").click(function (event) {
event.preventDefault();
linkLocation = this.href;
$("iframe").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
</script>
<a href="competition.html" class="transition" target="iframe">Home</a>
<iframe src="main.html" name="iframe" seamless="seamless" width="800" height="800">
</iframe>
采纳答案by Udit Bhardwaj
you can't change location of iframe window because many times it's not allowed. Due to security reasons some websites set X-Frame-Options to SAMEORIGIN you can test this, just change
您无法更改 iframe 窗口的位置，因为很多时候这是不允许的。由于安全原因，一些网站将 X-Frame-Options 设置为 SAMEORIGIN 您可以测试一下，只需更改
//your syntax is wrong here see below for correct
window.location = linkLocation
window.location = linkLocation
to
到
//correct way to change the location of iframe window
window.frames['yourframeName'].location=linkLocation
window.frames['yourframeName'].location=linkLocation
and <a>'s link hrefto http://www.google.com
和<a>“s链路href来http://www.google.com
now see the error in the console.
现在在控制台中看到错误。
hence your syntax is wrong you are not changing the location of your iframe you are changing loacation of your main page (window) which contains the targeted iframe. So the correction to get your work done is
因此您的语法是错误的 您没有更改 iframe 的位置 您正在更改包含目标 iframe 的主页（窗口）的位置。因此，完成工作的更正是
function redirectPage() {
$('iframe').attr('src',linkLocation);
$('iframe').fadeIn()
}
回答by BrownEyes
Use document.getElementById("iframe").srcto change the src attribute of the iframe, and setting it to the clicked link href.
使用document.getElementById("iframe").src改变的iframe src属性，并将其设置为被点击链接的href。
Also you should get the href by using $(this).attr("href");
你也应该通过使用获取href $(this).attr("href");
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("body").css("display", "none");
$("body").fadeIn(2000);
$(".transition").click(function (event) {
event.preventDefault();
linkLocation = $(this).attr("href");
$("iframe").fadeOut(1000, redirectPage(linkLocation));
});
function redirectPage(url) {
document.getElementById("iframe").src = url;
}
});
</script>
<a href="competition.html" class="transition" target="iframe">Home</a>
<iframe src="main.html" id="iframe" name="iframe" seamless="seamless" width="800" height="800">
</iframe>
