Question

我想知道是否有办法检索从iframe发送的ajax请求的响应。

iframe执行以下操作：

iframe中的脚本发送ajax请求
iframe获得回复，并更新iframe中的内容

我想要做的是拦截iframe之外的请求，并使用该信息更新页面。

如果您使用chrome的开发工具，并转到网络标签，则可以看到iframe发出的请求/响应。如果有一个窗口事件或类似的东西会在每次响应进入页面时触发它会很好。

注意：iframe是不在同一域中的页面。

Answer 1

如果子iframe与父级不在同一个域中，那么您无法真正做任何可以跨浏览器工作的内容。请参阅下面的jasonjifly的答案，了解适用于某些浏览器的技术，假设您可以控制两个框架上的客户端脚本。

如果父母和孩子在同一个域上，那么您就可以实现所需的目标。

例如，假设您正在使用jquery，则可以在iframe中使用此代码：

$.ajax(function() {
   .....
   complete: function() {
       window.parent.onAjaxComplete('Hi there');
   }
});

在父框架中使用此代码：

function onAjaxComplete(msg)
{
    alert(msg);
}

要在跨域方案中实现类似的结果，您可以让父帧轮询服务器。当服务器从子iframe接收到ajax请求时，它可以通过轮询服务提醒父页面。显然，如果您可以控制子iframe调用的服务，那么这只适用。

Answer 2

理论上，由于同源政策，禁止在两个跨域iframe之间进行通信，请参阅此页：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript

在HTML5之前，我们有一些解决方法：

如果您只想使用iframe获取跨域数据，可以使用JQuery：JSONP，本质就是使用。 “”允许执行跨域javascript。
另一种方法是“iframe中的iframe中的iframe”，您可以参考此页面：http://blog.cakemail.com/the-iframe-cross-domain-policy-problem/

HTML5：

window.postMessage，请参阅此页：https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage
HTML5 CORS，您需要配置服务器，请参阅此页面：http://www.html5rocks.com/en/tutorials/cors/

我的建议是使用解决方案1，它几乎适用于所有主流浏览器。

Answer 3

(function() {
    var origOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function() {
        this.addEventListener('load', function() {
            var json = $.parseJSON(this.responseText);


        });
        origOpen.apply(this, arguments);
    };
})();

有没有办法检索从iframe发送的ajax响应？

3 个答案: