javascript - 如何使用 jQuery 将页面重定向到 iframe

Question

在我的网站上，我有一个 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>

Answer 1

您不能更改 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()
    }