网页插件开发总结(2) - Ajax和Iframe的跨域通信

[b]（二）Ajax和Iframe的跨域通信
[/b]
既然是网页插件，还用到了iframe，自然会涉及到跨域的问题。其实跨域的问题有很多种解决方案，比如XDomainRequest，Crossdomain XHR，还有让人期待的HTML5，可惜这些目前很多主流浏览器都不支持。其实Ajax的跨域还是很好解决的，目前最常用的就是JSONP了，即使没有jQuery，用前一篇里的loadModule函数也可以进行简单的JSONP调用。

不过iframe的跨域问题就有点棘手了。因为插件是在第三方页面上的，而我们的iframe是在我们自己的域名下面的，因此如果iframe里的内容有所更新，我们无法直接从iframe内来通知页面以更新页面上的内容或是改变iframe大小。

不过我们从这篇文章里找到解决方法，文章里作者提出了下面这一个定义和四个法则。

[quote]定义：一个窗口可以指一个iframe或者是顶层窗口（即主窗口）
法则1：这个层级系统中任意一个窗口都可以获取到另一个窗口的对象。
法则2：只有同属一个域名的窗口才能相互存取它们的内部状态和数据。
法则3：这个层级系统中的任意一个窗口都可以设置（但不一定能读取）另一个窗口的URL，即使它们属于不同的域名。
法则4：当一个窗口的URL Fragment发生改变时，页面不会刷新。[/quote]

作者其实提到了三种解决方法，但它们最基本的原理都是上面提到的那些法则。我们使用的是第一种方法，在iframe里通过设置主窗口的URL Fragment来给主窗口传递信息，而主窗口里的JavaScript则每隔100ms轮询一次处理消息并把URL Fragment复位。主窗口中的代码如下：

    setInterval(function() {
        var h = window.location.hash;
        if (h.substring(0,7) == "#height") {
            window.location.hash = "#_";
            currentHeight = parseInt(h.substring(8), 10);
            adjustPostion(currentHeight);
        } else if (…) {
		……
	}
    }, 100);

在IFrame中则用如下代码传递消息：

window.parent.location.href = srcUrl + "#height=280";

或者

parent.window.location.hash = “height=280”;

前者代码里的的srcUrl就是主窗口的URL；后者更方便，但有时在IE下面好像有问题，所以我们还是用的前者。

当然这个方法也有副作用，首先你需要去轮询，必然就会有延迟，而且会改变主窗口的URL（多一个Fragment）。不过对我们来说都还可接受。作者还提到了另外两个方法，都是通过第三个隐藏的iframe作为proxy来避免轮询和改变主窗口URL。一种是每次发送消息时就创建一个proxy iframe，发送完就关掉；另一种是只创建一个proxy iframe，并同过window.resize和监控resize事件来通知proxy iframe有新的消息。可惜这两个方法我们都没法用。因为它们都要求创建一个和主窗口在同一个域名下的iframe，再由此iframe内的JavaScript来传递消息给主窗口，而主窗口是第三方网页，其域名根本不在我们的控制范围内……当然在一定的情况下，这两种方法还是有用的，有兴趣的可以参考原文。

参考:
Cross-Domain Communication with IFrames
[url]http://softwareas.com/cross-domain-communication-with-iframes[/url]