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

使用document.getElementById("iframe").src更改iframe的src属性，并将其设置为点击的链接href。

此外，您应该使用$(this).attr("href");

获取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>

Answer 2

您无法更改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的主页（窗口）的loacation。因此，完成工作的更正是

function redirectPage() {
        $('iframe').attr('src',linkLocation);
        $('iframe').fadeIn()
    }

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

2 个答案: