iframe 的跨域问题

Question

我知道跨浏览器域调用的解决方案。使用 JSONP、进行代理调用或接受服务器上的域。我今天在公司发现了另外一种奇怪的方式。

方法：

他们正在更改主机以匹配第二台服务器的主机使用这个 -

window.location.host = "xyz.com";
          or
document.domain = "xyz.com";

然后他们正在创建一个隐藏的 iframe 并在 iframe 中获取内容并将内容替换为可见元素。

问题：

它适用于 iframe，但如果我进行 ajax 调用，它就不起作用。这有什么要说的吗？

Answer 1

我不是 jsonp 的粉丝，它会在数据和表示之间产生耦合，所以我之前研究过这个问题，嗯，你可以使用一个技巧，请遵循：

假设我们有名为 A 的主窗口和名为 B 的 iframe 中的“子”窗口。 A 和 B 必须由同一主机提供服务，但可以有不同的子域，例如：

A 由 sub1.example.com 提供

B 来自 sub2.example.com

浏览器将允许您更改文档的域，但仍然限制您，因此您只能通过删除子域来更改域，直到您到达主机，因此在 A 中您更改域，如下所示：

document.domain = "example.com";

在 B 中，您首先对其域 (sub2.example.com) 进行 ajax 调用，然后在发送第一个请求后，您像在 A 中一样更改域，以便两个文档具有相同的域。 由于您向 B 中的原始域发出请求，浏览器将允许您继续向其发送请求，但由于您还更改了其域，现在 A 和 B 具有相同的域，它们可以相互通信。

请务必先在 B 中向其原始域发出至少一个请求，然后再更改域。 此外，如果两个页面都不是从同一个主机提供的，它也不会起作用，所以在大多数情况下它不能解决问题，但它确实让你有更多的回旋余地。

我不止一次使用这个技巧并且没有遇到任何问题，据我所知，它适用于所有浏览器，如果在某些情况下不可用，请告诉我。

这是一个伪示例：

in A
==================
document.domain = "example.com";
var child; // keep reference to B
function setChild(win) {
    childDocument = win;
}

function handleMessage(message) {
    do what ever it is you need to
}

in B
==================
make ajax request
document.domain = "example.com";
parent.setChild(this);

function ajaxCallback(message) {
    parent.handleMessage(message);
}