JS实现不同域（Domain）之间的数据交换

http://blog.youkuaiyun.com/xymyeah/archive/2007/04/22/1575061.aspx

 

实现不同域（Domain）之间的数据交换

引言

前些天在对公司原有的 web 应用进行改版时遇到一个问题，当时需要从原有的应用中提取出一部分，用一个更为通用的来进行替换，并且仍然保留原有的应用接口。原有的应用属于 news.mycompany.com 域，而新应用将被部署到 upload.mycopany.com。当我试着从新的域向 news.mycompany.com 传递数据时，在前台遇到了浏览器返回的“拒绝访问(Access Denied)” 的错误信息，通过参考在 google 中查到的大量英文资料找到了问题的症结，并通过指定两个域中页面的 docment.domain 属性使问题得到了部分解决。后来一时兴起在 google 中查找与 document.domain 相关的中文资料，但得到的大部分是网络安全方面的文章，很少有文章提及通过指定页面的 document.domain 属性能够实现两个域之间的数据交换，于是决定写下此文，希望能够做到抛砖引玉吧。

关键字： JavaScript, Domain, Access Denied
日期：2003-07-06

 

问题的提出

在开发 Web 应用时经常会遇到需要在两个帧之间传递数据的情况，这里的帧可以是 frameset 中的 frame 也可以是独立的窗口。常见的情况是一个帧作为应用的主体，另一个帧则提供一些供用户选择的选项，用户选择完毕后，该帧把用户作出的选择发送到服务器并向主 要的帧传递一些信息，这里的信息可能是用户的选择也可能是服务器返回的数据。当两个帧中的内容同属于一个域时实现以来比较简单，但是当它们分属于不同域时 问题就变得复杂而棘手了，因为这里涉及到了数据访问的安全性问题,搞不好就会遇到浏览器返回的“拒绝访问(Access Denied)” 的错误信息。

可能的解决方案

下面我们将通过几个试验来分析一下在分属于不同域的帧之间传递数据的一些方法。

• 利用客户端脚本(如 JavaScript)和窗口句柄在两个帧之间传递数据
• 利用 MSIE 提供的对话框在两个帧之间传递数据
• 利用服务器端的应用，通过 session 来传递数据

方案一

用客户端脚本实现两个帧之间的数据交换应该是最为轻量级的方式之一了，这样做不会增加服务器的负载也不会占用网络带宽，数据交换完全是在客户端完成。下面就让我们先来了解一下用客户端脚本（以 JavaScript 为例）和窗口句柄如何实现一个域内的数据交换。

我们通过一个实例来进行说明：假设需要给用户提供一个新闻的录入界面，用户可以用它录入新闻的原始内容，并且可以在其中嵌入一副图片。为了实现这个功能界面我们设计了两个帧，或者说是两个窗口：

• 主窗口： 新闻内容的主要编辑界面，用户可以在里面录入新闻的标题、作者、新闻主体等内容，还有一个图片框可以预览上传的图片
  
• 弹出窗口： 处理图片上传的界面，用户可以选择本地图片进行上传，成功后它把服务器上文件的 url 返回给主窗口进行预览
  

为了简单起见，我们假设两个窗口中的内容都是静态的，主窗口对应的文件为 NewsEdit.html，弹出窗口对应的文件为 ImgUpload.html（而大多数情况下两个窗口的内容都应该是动态生成的）。

其中 NewsEdit.html 位于 news.mycompany.com 的主目录下，其源代码如下所示：