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

【问题标题】：How to redirect page into iframe using jQuery如何使用 jQuery 将页面重定向到 iframe
【发布时间】：2013-10-24 19:00:44
【问题描述】：

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

【问题讨论】：

为什么不为此使用单独的 div（部分）？将您需要的所有内容放在一个页面中并按需显示/隐藏
我刚试过，你的代码工作正常，点击相关链接我在 iframe 中得到一个新页面。
在 iframe 中打开的内容不包含链接，只有文本。所有相关链接都在父页面上。如果你做了我所做的并且成功了，我将不得不回去再试一次，哈哈。

标签： javascript jquery html css iframe

【解决方案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()
    }

【讨论】：

对，你的建议奏效了……有点。我现在可以获取 iframe 的源以更改为新页面 - 但是现在当我单击另一个相对链接时，iframe 的源保持不变。编辑 - 我找到了原因。我正在单击包含 iframe 的页面的链接，因此脚本被卡住了。出于测试目的，我将 href 更改为 google，并且脚本运行良好！在接受您的解决方案之前，我会在我的实际网站上验证您的答案。

【解决方案2】：

使用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>

【讨论】：