阻止历史传播到父窗口

时间:2014-07-30 09:55:28

标签: javascript iframe browser-history hashchange

我有2个简单的html页面:父母和孩子。家长将孩子存放在iframe内 Parent.html:

<html>
<head></head>
<body>

<input type="text" id="text" />
<input type="button" value="change hash" onclick="javascript:changeHash()" />

<iframe src="Child.html"></iframe>

<script type="text/javascript">
    function changeHash () {
        window.location.hash = document.getElementById('text').value;
    }
</script>

</body>
</html>

And Child.html:

<html>
<head></head>
<body>

<input type="button" value="go back" onclick="javascript:goBack()" />

<script type="text/javascript">
    function goBack () {
        this.history.back();
    }
</script>

</body>
</html>

我使用更改哈希按钮向历史记录添加多个哈希值。当我在iframe内按返回按钮时 - 更改了父页面的哈希值。似乎这是spec的行为。

所以问题是:是否有可能阻止从iframe传播回到它的父页面?所以我希望iframe不要改变父的历史/哈希。

注意: go功能的行为相同(实际上,go(-1)back()相同。)

1 个答案:

答案 0 :(得分:3)

我认为使用框架无法做到这一点,但我有一个可以(部分)解决这个问题的解决方案。

首先,我考虑更改对象history并重新定义它,但这是不可能的,因为它是窗口内不可写的属性。但我们可以重新定义history内的函数。

这导致我重新定义函数back()而不是让history对象完成他的工作,我们必须find the previous url并更改文档的位置(子) 。

在你的Child.html中,重新定义back()这样的功能:

history.back = function ()
{
    document.location = document.referrer;
}

我们在这个函数中遇到的问题是,一旦加载了父文档,并且加载了iframe(子),子项的document.referrer将返回父文件的URL

因此,在更改document.location之前,让我们测试document.referrer是否与父亲的网址不同(无法锚定)

history.back = function ()
{
    var url = window.parent.document.location.href.split("#")[0];
    if(document.referrer!=url)
        document.location = document.referrer;
}

最后,这是我找到的解决方案,不幸的是它有一个问题,就是你无法重新定义允许你转到下一个网址的功能forward(),它是无法找到下一个网址,document.referrer会返回您来自的网页的网址,可能是上一页或下一页。但是你仍然可以在更改父位置的情况下在iframe内导航。