仅跟踪 iframe 历史记录答案

【问题标题】：Track only iframe history仅跟踪 iframe 历史记录
【发布时间】：2012-05-24 21:30:15
【问题描述】：

我有一个包含 iframe 的页面，我只想跟踪 iframe 的历史记录。我尝试像这样使用历史对象：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script type="text/javascript">
        function checkFrameHistory() {
            alert(window.frames["test2"].history.length);
        }

        function checkThisHistory() {
            alert(history.length);
        }
        </script>
    </head>
    <body>

        <iframe name="test2" src="test2.html"></iframe>

        <div>
            <input type="button" onclick="checkFrameHistory()" value="Frame history"/>
            <input type="button" onclick="checkThisHistory()" value="This history"/>
        </div>

    </body>
</html>

test2.html

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script type="text/javascript">
        function checkMyHistory() {
            alert(history.length);
        }
        </script>
    </head>
    <body>
    <div>
        Test2
    </div>

    <div>
        <input type="button" onclick="checkMyHistory()" value="My history"/>
    </div>

    </body>
</html>

但它实际上给了我包括父窗口在内的历史记录。

例如，我在主窗口中访问了另一个站点，然后又回到了我的 iframe 测试站点。 window.frames["test2"].history.length 和 history.length 仍然通过将长度增加 2 给我相同的计数。

我做错了吗？有没有办法只跟踪 iframe 历史记录？

【问题讨论】：

test2.html 页面中有什么？
刚刚添加了test2.html，但它只是一个简单的测试页面。谢谢！
此INFO 可以提供更多信息。
这种行为在所有浏览器中都一致吗？
我正在 chrome、safari 和 firefox 中对此进行测试。我尝试使用 iframe 的 contentWindow 访问它，但还是一样。

标签： javascript html iframe

【解决方案1】：

Chrome 在窗口基础上管理历史记录；不在单独的框架上。这种行为可能是您的问题的原因。

不知道它是否适用于所有浏览器的默认行为。

编辑：您必须维护您的导航历史服务器端。如另一个答案所述，在主窗口上保留一个数组在您还使用父窗口导航时不起作用。

【讨论】：

有效点解释了问题的根源，但缺少对如何解决他的问题的解释。

【解决方案2】：

有一种简单的方法可以做到这一点，当然前提是 iframe 内容是同一个域。

从您绑定到 iframe 窗口对象的 beforeUnload 或 load 事件的父级。在事件的回调处理程序中，您只需按照locations.push(getElementById("iframe").contentWindow.location.href) 的方式执行一些操作，其中位置当然是父范围中先前定义的数组。

【讨论】：

我可以对不同的域 url 使用相同的吗？如果不是，为什么不可能？

【解决方案3】：

使用它来访问 iframe 的历史记录

document.getElementById("test2").contentWindow.history.length

【讨论】：

【解决方案4】：

由于same-origin policy，您不太可能访问与框架关联的任何对象。

您是否尝试过在页面本身和 iframe 上将域设置为相等？例如

//somewhere on your page in a script tag
document.domain = "your-top-level-domain.com";

这应该向浏览器发出信号，表明页面相互信任，并且应该可以访问它们的内部状态

【讨论】：

嗯...目前这些 html 页面是 localhost 并且应该已经在同一个域上...似乎我能够访问 iframe 中的历史记录，例如：window.frames["test2"].history... at至少我没有收到任何错误...只是框架的历史对象似乎包含原始页面历史记录，而不是仅引用 iframe 历史记录...
哦，我明白我的错误了。对，尝试更改代码以访问 iframe，例如 window.frames["test2"].contentWindow.history。 contentWindow 是重要部分

【解决方案5】：

如果框架包含contentWindow，则可以使用frame.contentWindow.history。

但并非所有浏览器都支持此属性。如果没有，框架的位置应该存储在一些变量中。在您的框架 onload 事件上绑定事件处理程序，如下所示（使用 jquery）

var frameHistory = [];
$(document).ready(function(){
    var frame = window.frames["test2"];
    $.bind(frame, "onload", function(){ //store location when frame loads
        frameHistory.push(frame.window.location.href);
    }
});

在您的按钮单击事件处理程序中：

alert(frameHistory.length);

【讨论】：

【解决方案6】：

有可能击败 SOP，只要您可以访问这两个域。您可以使用辅助 IFRAME 从 BODY 传递 onchange 事件。

这篇文章应该非常有帮助： Resizing an iframe based on content

【讨论】：