从 iFrame 更改父窗口 URL

Posted 2023-03-05

【中文标题】从 iFrame 更改父窗口 URL

【英文标题】：Change parent window URL from iFrame

【发布时间】：2014-06-17 15:20:58

【问题描述】：

我在 myurl.com 上有一个父站点，我从该站点在覆盖/模态层中加载 iFrame。在 iFrame 中，我有不同的选项卡，其中步骤 1-5 包含不同的表单元素——换句话说，它是一种结帐流程。每个选项卡都位于一个 div 中，例如。 ID“tab1”。

我使用 easytabs jQuery 插件 (http://os.alfajango.com/easytabs/)，它使用 jQuery 哈希更改来更改 URL，当您单击选项卡时，URL 会显示例如。 myurl.com#tab1。但是，当标签放在IF帧中时，这不起作用。这是一个问题，因为当您单击浏览器的后退按钮时，您将离开整个流程并可能丢失大量输入数据，这意味着 baaaaad UX。

所以，我的问题是：任何想法如何从您在 iFrame 中执行的操作更改父网站上的 URL？

提前谢谢你！

基本上我在父窗口“myurl.com”中的代码如下所示：

<div class="main-content">
    <!-- Content goes here -->
</div>

<div class="overlay">
    <iframe id="iframe" src="iframe.html"></iframe>
</div>                                                                      

iframe.html 中的标签看起来就像这样：

<div id="tabs-container">
    <ul>
        <li><a href="#tab1">Go to tab1</a></li>
        <li><a href="#tab2">Go to tab2</a></li>
    </ul>
    <div id="tab1">
        <!-- Content for Tab 1 goes here -->
    </div>

    <div id="tab2">
        <!-- Content for Tab 2 goes here -->
    </div>
</div>

【参考方案1】：

试试这个

<a href="#" onclick="top.window.location.href='URLGoesHere';">

还可以在HTML 中阅读有关top 的更多信息

_top 在***框架集中加载内容（实际上，整个浏览器 窗口），无论当前帧向下嵌套了多少层 位于

【讨论】：

如果我使用上面的 URL，我的 URL 看起来像这样：myurl.com/iframe.html#tab1 - 页面刷新，我只看到 iframe.html 内容而不是父站点。页面不应刷新 - 它应该只将选项卡的 ID 添加到父 URL，因此它应该看起来像这样 myurl.com#tab1

这适用于父网站 - 但不适用于 iframe。 ` $('#tab1').click(function(e) window.location.hash = $(this).attr('id'); e.preventDefault(); ); `

@McAsh ，您将此标记为已接受的答案，但您的 cmets 建议没有人可以告诉您如何在不刷新的情况下更改父 URL - 您找到答案了吗？也许我错了。谢谢

【参考方案2】：

一种方法是使用window.postMessage： https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

【参考方案3】：

如果您只是想在不使用 javascript 的情况下执行此操作，您可以提供：

<a href="absolute_target_url" target="_parent"></a>

只需将目标提及为父级，它甚至可以用于跨域 iframe。

【参考方案4】：

如果您从父框架加载 iframe 的 url，也可以这样做。

<a href="#" onclick="window.parent.location='/url';return false;">

【讨论】：

这也不起作用。我最终得到与上述建议相同的 URL，并且页面刷新。它应该只在父 URL 的末尾添加选项卡的 ID。