javascript - 如何在不触发错误的情况下检测 iframe 是否可访问？

Question

基本上，我加载了一个 iframe，只要它触发 onload 事件，就会从父级访问它。它工作正常，但当 iframe 的内容不再位于同一域中时，我会收到错误消息，这是可以预料的。

唯一的问题是，我想抑制这些错误。不幸的是，try/catch 不会捕获此异常，并且尝试访问这些属性中的任何一个以验证它们会再次产生相同的错误，从而破坏了目的。

有没有一种可靠的方法可以简单地检查 iframe 内容是否可访问而不产生任何错误消息？

谢谢

编辑:

为了上下文而不是让人们回答不相关的评论；我正在编写一个小脚本，它根据 iframe 文档的高度自动调整父页面上 iframe 的大小。当用户单击 iframe 内指向域外的链接时，我显然无法检测到页面的高度，但我不希望在控制台中触发任何错误，而是优雅地处理异常。

我知道有可用的解决方法，我只是想通过弄清楚是否有一种优雅的方式来处理这些类型的情况来 self 教育，而不是仅仅诉诸丑陋的解决方法。

Answer 1

如果您可以将一点 JavaScript 添加到您域中的所有页面，您希望在 iframe 中加载，您可以使用 window.postMessage , 不受同源策略约束。可能最简单的方法是让子窗口在加载时向父窗口发送一条消息，并使用它代替 onload。例如，您可以将此添加到每个页面:

if (window.parent) document.addEventListener( 'load', function() {
    window.parent.postMessage( "child loaded", "/" );
}, false );

只要页面加载到具有相同来源的框架中，就会向父窗口发送一条消息。然后你会像这样听它:

var iframe = document.getElementById( 'your-iframe' );
var origin = window.location.protocol + '://' + window.location.host;
if (window.location.port != 80) origin += ':' + window.location.port;

window.addEventListener( 'message', function (event) {
    if (event.source != iframe.contentWindow
            || event.origin != origin || event.data != "child loaded")
        return;

    // do here what you used to do on the iframe's load event
}, false );

请注意，示例使用 W3C/Netscape 事件 API，因此在版本 9 之前的 Internet Explorer 中无法运行。