4

请考虑以下两个域:domain1.com 和 domain2。

从 domain1 我打开一个指向 domain2 的 iframe。

现在,我希望这些人能够相互通信,我已经通过在两个域上应用哈希更改事件侦听器成功地实现了这一点。

这样,如果 domain2 使用新的哈希调用 parent.location,父窗口 (domain1) 中的哈希就会触发。此外,如果我从父级将其 src 属性更改为新哈希,则会在 iframe 中触发哈希更改事件。

这很好用!

麻烦来了:

浏览器中的后退和前进功能变得混乱。简单地说,通过创建两个哈希实例,浏览器后退按钮必须单击两次才能更改父哈希,因为它必须首先循环遍历 iframe 的哈希。

如何在不搞砸历史对象的情况下与跨域 iframe 2 方式通信?

谢谢!

4

2 回答 2

7

使用easyXDM,它是一个为您完成所有繁重工作的 javascript 库,使您能够在包括 IE6 在内的所有浏览器中进行跨域通信和 RPC。

这不会对任何当前浏览器(甚至 IE6)使用 HashTransport,因此不会更改历史记录。

你不会找到更好的..

您可以在这篇Script Junkie 文章中了解它的一些内部工作原理,或者直接转到github 上的自述文件

于 2010-11-08T14:02:03.030 回答
2

跨域通信的另一种技术是(ab)使用window.name. 它需要一个 iframe 最初具有一个相同域的 src,然后您移动到另一个设置 window.name 的域,然后退回到原始源(退回历史)。这个想法是window.name除非明确设置,否则不会更改,这意味着您可以window.name跨域传输数据。

该技术在以下位置进行了更详细的描述:
- http://skysanders.net/subtext/archive/2010/10/11/leveraging-window.name-transport-for-secure-and-efficient-cross-domain-communications。 aspx
- http://jectbd.com/?p=611

请务必选择避免在 IE 中单击声音的实现。

不幸的是,它仍然与您的历史记录混淆,但它向前迈了一步,然后又回到了它所在的历史记录点。不过,一个很大的好处是您不必解析和编码 URI 字符串,而是可以立即使用 JSON。

例如使用 JSON 库

// access window.name from parent frame
// note: only when iframe stepped back to same domain.
var data = JSON.parse( iframe.contentWindow.name );

// set child frame name
// note: only when iframe stepped back to same domain.
iframe.contentWindow.name = JSON.stringify( {
    foo : "bar"
} ); // to JSON string

// set own name ( child frame )
window.name = JSON.stringify( {
    foo : "bar"
} ); // to JSON string

cookie 技术也是可行的,对于这两种技术,如果您想避免历史记录更改但仍需要 http 请求,则需要在目标 iframe 中执行 ajax 请求。所以:

  1. 将数据发送到 iframe x(使用 cookie 或 window.name 技术)
  2. 在 iframe x 中使用轮询器捕获数据
  3. 在 iframe x 中执行 ajax 请求。
  4. 将数据发送回 iframe y(使用 cookie 或 window.name 技术)
  5. 在 iframe y 中使用轮询器捕获数据
  6. 做曲子。

任何页面刷新 (httprequest) 或 url 更改都会更新历史记录(旧版或所有 IE 版本除外),因此需要更多代码,唉。

于 2010-11-08T09:41:23.037 回答