在我的网站上,我有一个 jQuery 脚本,它在页面正文中淡出,然后当用户单击相关链接时,正文淡出并将用户重定向到新页面,然后脚本再次启动。
我的同事建议我最好将主要内容放入iframe中,这样可以避免在换页时全身刷新,但问题是当用户点击相关链接时iframe会淡出但它不是以 iframe 为目标的新页面,而是打开页面。
我该如何解决这个问题?我认为错误发生在 $("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>
最佳答案
您不能更改 iframe 窗口的位置,因为很多时候这是不允许的。由于安全原因 一些网站将 X-Frame-Options 设置为 SAMEORIGIN 你可以测试这个,只需更改
//your syntax is wrong here see below for correct
window.location = linkLocation
到
//correct way to change the location of iframe window
window.frames['yourframeName'].location=linkLocation
和<a>
的链接 href
至 http://www.google.com
现在在控制台中查看错误。
因此您的语法错误您没有更改 iframe 的位置您正在更改包含目标 iframe 的主页(窗口)的位置。因此,完成工作的更正方法是
function redirectPage() {
$('iframe').attr('src',linkLocation);
$('iframe').fadeIn()
}
关于javascript - 如何使用 jQuery 将页面重定向到 iframe,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19562627/