跨文档消息通信

html5 postMessage解决跨域、跨窗口消息传递

了解窗口间通讯的方式

在不同的页面，不同的浏览器窗口间进行页面的访问操作，有哪几种方式？

1.同域

iframe

    可以通过JS去访问被包含页面的DOM元素，同样：被包含的页面（子级）也可以操作包含页面（父级）的元素。

总结 ： 父级改变子级：子级.contentWindow

             子级改变父级 ： parent(是一个window对象)，如果当前页面是顶级的（上面没有被其他页面所包含），那么parent就是当前页面的window对象，如果被包含了，则parent就是包含当前页面的父级页面的window对象

    如果要操作一个iframe中的DOM, 首先要获取到iframe引入的页面的  window.iframe.contentWindow(被ifram包含的页面的window对象)

2.window.open

window.open返回被打开窗口的window对象,所以直接用这个返回值就可以操作

2.跨域窗口操作

在www.a.com里操作www.b.com的iframe,

浏览器会报错 ：Permlsslon denled to access property document，跨域了。

当本页面和被包含页面，不在同一个域名下的时候（在www.a.com里操作www.b.com的iframe,浏览器会报错 ：Permlsslon denled to access property 'document'），这样的操作就会有跨域的操作安全限制问题。

今天介绍的是HTML5跨域解决方法。

postMessage对象

可以通过这个方法，给另外的窗口发送信息。是window对象下的方法。

接收信息的窗口对象.postMessage，注意 :不是当前窗口，和我们想象的不一样，不是当前窗口.postMessage。

需要牢记的是：只要操作不同窗口对象，第一步就是要获取窗口对象.contentWindow

·接收消息的窗口对象.postMessage()

·一参：发送的数据，二参：接收的域

在a.com下写以下截图内容，omyIframe就是a.com引入的iframe,现在就是要操作这个iframe

·交互方式

    --iframe : 父页面：contentWindow、子页面：window.top

    --窗口页 ：父页面，window.open、子页面：window.opener

·接收事件

    --message:当窗口接收到通过postMessage发送过来的数据时候触发

    --ev.origin : 发送数据来源的域

    --ev.data : 发送的数据

总结流程： 

如以上的情况 ：在www.a.com里操作www.b.com的iframe（以下简称a域、b域），在a域里通过postMessage发送了一个字符到被接收message的页面，告诉他要做什么，b域接收到这个信息以后判断一下，如果是“1”。。。。如果是2.。。。（根据接收到的信息做你要做的事情）

通过以上可以看出，其实并不是直接进行操作，而是通过postMessage进行中转，postMessage相当于是一个中间人，传口令一样的把某些传给另一个窗口，从而实现。

如果这么做，那么其他的，比如baidu.com也写了postMessage这么一段话，是不是也可以把我的页面包含进来改掉某部分呢？是可以的。但是如果我的页面，如果只想b.com发送postMessage的时候可以改，别的域名发送不可以改，如何分辨是谁发送的？就是用：ev.origin : 发送数据来源的域。