HTML5之window.postMessage实现跨域传递消息

本是古典何须时尚 2024-02-17 14:15 135阅读 0赞

在做项目时，遇到了操作iframe的相关问题。业务很简单，其实就是在操作iframe内部某个窗体时，调用父窗体的一个函数。于是就写了两个很简单的htm页面用来测试，使用网上流行的方法在谷歌浏览器中始终报错，不能通过。

父页面parent.html的代码如下

**\[html\]** [view plain][] [copy][view plain]

子页面child.html的代码如下

**\[html\]** [view plain][] [copy][view plain]

网络上流行的方法 var t=window.parent;t.ParentFunction();在IE中能调用，可是在谷歌浏览器中总是提示如下错误，

Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

**网上找了很长时间都没法发现方法，有的也是很早以前的版本，基本上没用了，而且人云亦云，基本上没有测试过。于是自己摸索，后来才发现，谷歌浏览器其实那种方法其实也可以，只是很奇怪，必须发布后才可以，在文件系统中调用，就会出现上边的错误。**

**其实还有一种html5的方法postMessage，于是就根据着进行了改写，最终代码如下：**

**父页面parent.html的代码如下**

**\[html\]** [view plain][] [copy][view plain]

1.  **<****html**xmlns="http://www.w3.org/1999/xhtml"**>**
2.  **<****head****>****<****title****>**
3.  **</****title****>**
4.  **<****script**src="jquery-1.10.1.min.js"type="text/javascript"**>****</****script****>**
5.  **<****script**type="text/javascript"**>**
6.  this.ParentFunction= function() \{//和注释掉的方法是一样的，也就是说加不加this都是一样的，因为此处的this就是windows 
7.   alert('ParentFunction'); 
8.   \} 
9.   // function ParentFunction() \{ 
10.  // alert('ParentFunction'); 
11.  // \} 
12.  function receiveMessage(e) \{ 
13.  var data = e.data; //获得传递的值 
14.  ParentFunction() ;
15.  //if(data=="ParentFunction") 
16.  //\{ 
17.  // ParentFunction() ; 
18.  //\} 
19.  \} 
20.  if (typeof window.addEventListener != 'undefined') \{//使用html5 的postMessage必须处理的 
21.  window.addEventListener('message', receiveMessage, false); 
22.  \} else if (typeof window.attachEvent != 'undefined') \{ 
23.  window.attachEvent('onmessage', receiveMessage); 
24.  \} 
25. **</****script****>****</****head****>**
26. **<****body****>**
27. **<****input**type="button"id="btnCancel"class="button"value="测试"**/>**
28. **<****iframe**id="FRMdetail"name="FRMdetail"frameborder="0"src='child.html'style="width:100%;height:100%;"**>****</****iframe****>**
29. **</****body****>**
30. **</****html****>**

子页面child.html的代码如下

**\[html\]** [view plain][] [copy][view plain]

[view plain]: http://blog.csdn.net/xuexiaodong009/article/details/9408045#