Question

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

我使用easytabs jQuery插件（http://os.alfajango.com/easytabs/），它使用jQuery哈希更改，以便在您单击选项卡时更改URL，以便URL表示例如。 myurl.com＃TAB1。但是，当标签放在iFrame内部时，这不起作用。这是一个问题，因为当您单击浏览器后退按钮时，您将离开整个流程并可能丢失大量输入数据，这意味着baaaaad UX。

所以，我的问题是：如何更改父网站上的网址以及您在iFrame中所做的操作？

提前谢谢！

基本上我在父窗口“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>

Answer 1

试试这个

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

另请参阅top

中有关HTML的详情

_top 加载顶级框架集中的内容（实际上，整个浏览器窗口），无论当前帧有多少嵌套级别位于

Answer 2

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

Answer 3

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

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

只要将目标提及为父级，即使是跨域iframe，也可以使用。

Answer 4

如果你从父框架加载iframe的网址，也可以这样做。

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

从iFrame更改父窗口URL

4 个答案: