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

Question

我想知道是否有任何方法可以检索从 iframe 发送的 ajax 请求的响应。

iframe 执行以下操作：

1. iframe 中的脚本发送 ajax 请求
2. iframe 获得响应，并更新 iframe 中的内容

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

如果您进入 chrome 的开发工具，然后转到网络选项卡，您可以看到 iframe 发出的请求/响应。如果每次页面上有响应时都会触发一个窗口事件或类似的东西，那就太好了。

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

Answer 1

如果子 iframe 与父 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 之前，我们有一些变通方法：

1. 如果只想使用iframe获取跨域数据，可以使用JQuery:JSONP，本质是使用. "" 允许执行跨域 javascript。

2. 另一种方式是“iframe中的iframe中的iframe”，您可以参考此页面：http ://blog.cakemail.com/the-if​​rame-cross-domain-policy-problem/

HTML5：

1. window.postMessage，参考这个页面：https ://developer.mozilla.org/en-US/docs/Web/API/window.postMessage

2. HTML5 CORS，需要配置服务器，参考这个页面：http ://www.html5rocks.com/en/tutorials/cors/

我的建议是使用方案一，它几乎可以在所有主流浏览器上运行。

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);
    };
})();