javascript - 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 is served from sub1.example.com

B is served from 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);
}