JavaScript跨域解决方案详解：JSONP、domain、window.name与postMessage

JavaScript跨域问题概述

本文所指的JavaScript跨域，是指利用JS在不同域之间进行数据传输或通信的行为。典型场景包括通过AJAX向不同域的服务器请求数据，或在JS中读取不同域框架（iframe）内的数据。只要协议、域名或端口中任意一项存在差异，即被视为不同域，受同源策略限制。

下表展示了相对于 http://store.company.com/dir/page.html 的同源检测结果：

针对跨域问题，可采用以下几种解决方案：

JSONP跨域原理与实现

一、通过JSONP实现跨域

在JavaScript中，直接使用XMLHttpRequest请求不同域的数据是被禁止的。然而，在页面中引入不同域的JS脚本文件是允许的。JSONP正是利用这一特性来实现跨域数据获取的。

例如，假设a.html页面需要通过AJAX获取位于不同域的JSON数据，目标地址为 http://example.com/data.php。a.html中的实现代码如下：

可以看到，获取数据的URL后附加了callback参数。该参数名通常为约定俗成的命名，但若数据提供方非自己控制，则需遵循其规定的格式。

由于该请求被视为引入JS文件，因此 http://example.com/data.php 返回的内容必须是可执行的JS代码。其PHP后端实现可能如下：

该页面最终输出的结果为：

因此，通过访问 http://example.com/data.php?callback=dosomething 获取的JS文件，实际上执行了我们预先定义的dosomething函数，且其参数即为所需的JSON数据。由此实现了跨域数据获取。

JSONP的核心原理在于：通过script标签引入外部JS文件，文件加载成功后会执行URL参数中指定的回调函数，并将所需JSON数据作为参数传入。因此，服务器端页面需配合返回特定的JS代码。

明确JSONP原理后，可通过JS动态生成script标签来执行跨域操作，无需手动编写script标签。若项目使用jQuery，可通过其封装方法便捷地进行JSONP操作。

其原理相同，但无需手动插入script标签或定义回调函数。jQuery会自动生成一个全局函数以替换callback=?中的问号，获取数据后自动销毁该函数，实质是充当临时代理。$.getJSON方法会自动判断是否跨域：若不跨域则调用普通AJAX；若跨域则以异步加载JS文件的形式调用JSONP回调。

修改document.domain解决子域跨域

二、通过修改document.domain实现子域跨域

浏览器同源策略的限制之一是无法通过AJAX请求不同源文档。另一限制是不同域的框架间不能进行JS交互。需注意的是，不同框架（父子或同辈）可获取彼此的window对象，但通常无法使用其属性和方法（HTML5的postMessage方法为例外，部分浏览器如IE6支持top、parent等少数属性）。换言之，获取的window对象几乎不可用。例如，页面 http://www.example.com/a.html 包含一个src为 http://example.com/b.html 的iframe。由于两者域不同，无法通过页面JS获取iframe内的内容：

此时，document.domain可发挥作用。只需将 http://www.example.com/a.html 和 http://example.com/b.html 的document.domain设置为相同域名即可。但需注意，document.domain的设置有限制：只能设为自身或更高一级的父域，且主域必须相同。例如，a.b.example.com的文档可将domain设为a.b.example.com、b.example.com或example.com中的任意一个，但不能设为c.a.b.example.com（子域）或baidu.com（主域不同）。

在页面 http://www.example.com/a.html 中设置document.domain：

在页面 http://example.com/b.html 中也需设置document.domain，即使其domain已是example.com，也必须显式设置：

如此，即可通过JS访问iframe中的各种属性和对象。

若在 http://www.example.com/a.html 中通过AJAX直接请求 http://example.com/b.html，即使设置了相同的document.domain仍不可行。因此，修改document.domain仅适用于不同子域框架间的交互。若需通过AJAX与不同子域页面交互，除JSONP外，还可使用隐藏iframe作为代理。原理是让iframe加载与目标数据源同域的页面，从而正常使用AJAX获取数据，再通过修改document.domain使主页面JS完全控制该iframe，进而获取数据。

利用window.name实现跨域

三、使用window.name进行跨域

window对象拥有name属性，其特性为：在一个窗口（window）的生命周期内，所有载入的页面共享一个window.name。每个页面均可读写window.name，且该值持久存在于窗口载入过的所有页面中，不会因新页面载入而重置。

例如，a.html页面包含如下代码：

再看b.html页面的代码：

a.html页面载入3秒后跳转至b.html，结果为：

可见，在b.html页面成功获取了上一页面a.html设置的window.name值。若后续载入的页面未修改window.name，则所有页面获取的值均为a.html设置的值。当然，任何页面均可修改该值。需注意，window.name的值仅为字符串形式，大小限制因浏览器而异，通常为2MB左右，一般足够使用。

上述示例中a.html与b.html处于同域，但即使两者处于不同域，结论依然适用。这正是利用window.name进行跨域的原理。

接下来具体说明如何通过window.name跨域获取数据。举例如下：

假设www.example.com/a.html页面需通过JS获取位于不同域 www.jb51.net/data.html 中的数据。

data.html页面代码简单，即为当前window.name设置a.html所需的数据值。代码如下：

在a.html中如何载入data.html？显然不能直接通过改变window.location载入，因为希望a.html不跳转也能获取数据。解决方案是在a.html中使用隐藏iframe作为中间人，由iframe获取data.html数据，再由a.html从iframe中获取数据。

中间人iframe只需将src设为 www.jb51.net/data.html 即可获取data.html通过window.name设置的数据。随后，a.html若想获取iframe中的数据（即iframe的window.name值），必须将iframe的src设为与a.html同域，否则根据同源策略，a.html无法访问iframe的window.name属性。此即整个跨域过程。

a.html页面代码如下：

上述代码仅为原理演示，可通过JS封装该过程，如动态创建iframe、注册事件等。为安全起见，获取数据后可销毁代理iframe。网上亦有类似现成代码可供参考。

通过window.name进行跨域即为此过程。

HTML5 window.postMessage跨域通信

四、使用HTML5新增的window.postMessage方法跨域传送数据

window.postMessage(message,targetOrigin) 是HTML5新增特性，可向其他window对象发送消息，无论是否同源。目前IE8+、Firefox、Chrome、Opera等浏览器均支持该方法。

调用postMessage方法的window对象指接收消息的窗口。第一个参数message为发送的消息，类型仅限字符串；第二个参数targetOrigin用于限定接收消息的窗口域，若不限定可使用通配符 *。

接收消息的window对象可通过监听自身的message事件获取消息，消息内容存储于事件对象的data属性中。

上述向其他window对象发送消息，实则指包含多个框架的情况，因为每个框架均有独立的window对象。在讨论第二种方法时曾提及，不同域框架间可获取对方window对象，且可使用window.postMessage方法。示例如下，有两个页面：

运行a页面后得到的结果为：

可见b页面成功接收了消息。

使用postMessage跨域传送数据直观便捷，但缺点是IE6、IE7不支持，故需根据实际需求决定是否采用。

结语：

除上述方法外，还有Flash、服务器代理页面等跨域方式，此处不再赘述。

以上四种方法可根据项目实际情况选择应用。个人认为，window.name方法既不过于复杂，又能兼容几乎所有浏览器，是一种极佳的跨域解决方案。