检测 iframe 何时从跨域站点返回答案

【问题标题】：Detect when an iframe returns from a cross domain site检测 iframe 何时从跨域站点返回
【发布时间】：2012-12-08 11:36:09
【问题描述】：

我的页面上有一个 iframe，用于向第三方页面提交表单。一旦第三方完成计算，它就会重定向回我自己的站点。我想检测 iframe 何时返回我自己的网站。

我目前的方法是使用超时并每 0.5 秒检查一次 iframe 的location.host。但是，当 iframe 仍在第三方网站上时，我收到了一个 JS 错误，我想避免这种情况。

有没有一种好方法可以确定 iframe 的位置何时回到我自己的服务器上而不会出现 JS 错误？

【问题讨论】：

标签： javascript iframe cross-domain-policy

【解决方案1】：

function check() {
    try { 
        location.host; // if I error, doStuff() is never hit. 
        doStuff();
    } catch( e ) {
        setTimeout(check, 5000);
    }
}

使用 try / catch 语句应该可以为您解决这个问题。可能还有其他方法可以解决这个问题，但是在查看您的问题后，这是第一个想到的。

另一种方法是从 iframe 监听 onload 事件。每次 iframe 页面更改时都会触发（至少在 chrome 中）。 http://jsfiddle.net/rlemon/DwVJX/1/ 这是一个快速演示。在 iframe 中单击 jsFiddle 徽标返回主页。我知道这并不能告诉您您是否在正确的域中，但是结合 try/catch 可以消除对计时器的需要。

【讨论】：

这也是我的第一个想法，但我的控制台仍然出现错误。至少我在 Chrome 中是这样做的。它不会停止执行，但我仍然想避免错误。
你能提供一个活生生的例子让我们看看吗？ jsfiddle.net/rlemon/VWnLG这里没看到。我什至没有在 throw "error" 上收到错误，而不是 error()
这里是一个简单的例子。 jsfiddle.net/4Vt83 只需单击“开始测试”链接，您将看到在 Chrome 中您会在控制台中收到 JS 错误，该错误未被 try/catch 块捕获。我想，由于它没有停止执行，你可以说这是一个“警告”而不是一个错误，但它肯定会显示为一个错误，我想避免这种情况。

【解决方案2】：

您可以将支票包裹在 try catch 块中。或者，您可以让主机上的页面“呼叫”父级。（类似于 parent.notifyReady() ）这样您就不必使用 setInterval

您可以使用 document.referrer 属性将您的逻辑基于是否调用父级

所以在你的第三页你可以有这样的东西：

if(document.referrer.indexOf('otherdomain.com') != -1) {
    // script called via otherdomain.com
    parent.notifyReady();
}

【讨论】：

我喜欢另一种方法（特别是如果您控制第三页上的代码）。
哇，这就是我一直在寻找的想法。我将对此进行测试，并让您知道它是否有效（然后将其作为答案）。感谢您的提示。

【解决方案3】：

我认为您目前正在做的是可靠地检测 iframe 是否存在于您的父页面域上托管的页面上的唯一方法。

当 iframe 位于与父级不同的域中时，大多数 iframe 属性都无法访问（访问时引发异常）。异常实际上表明 iframe 不在您的站点上，因此只需捕获异常并重试即可。如果未引发异常，则 iframe 位于与其父级位于同一域中的页面上。

【讨论】：