1.同源策略

在HTML页面中，我们有时候会使用<iframe>标签打开一个子窗口，又或者使用window.open方法打开一个子窗口，但有时想让父子窗口之间进行通信。例如：根据父窗口的大小，对<iframe>子窗口大小进行设置等问题。
①、如果<iframe>中src属性配置的地址和父窗口在同一个域下，可以在子窗口中通过window.parent.document来获取父窗口的DOM对象。亦或父窗口也可以通过contentWindow属性获取子窗口的DOM对象（Iframe情况下）。例如：document.getElementById(‘iframe标签的ID’).contentWindow。两者之间操作不会出现任何跨域的问题，可以自由的获取任意想要的元素信息内容。也就不在本篇文章的讨论范围内。
②、如果<iframe>中的src属性配置的地址与父窗口不在同一个域下，即：协议、域名、端口任何一个不一样都会造成跨域问题。当使用window.parent.document进行操作的时候，就会提示跨域的问题，就是上面截图的信息内容。又或者使用contentWindow属性也会提示相同的跨域问题。

SecurityError: Blocked a frame with origin from accessing a cross-origin frame…

在不同端口号下，不能使用传统的iframe嵌套调用方法。

document.getElementById(“mainFrame”).contentWindow.xxxx()；

<protocol>://<hostname>:<port>/path/to/page.html

如果要访问iframe，协议、主机名和端口必须与域相同。

2.不同源解决办法-postMessage不受跨域的影响

在HTML页面中，可以在当前页面中使用window.parent获取父级窗口对象（WIndow），从而向父级窗口发送消息（子->父）。同样也可以使用contentWindow获取Iframe的打开的子窗口对象，从而向子窗口发送消息。（父->子）

在父窗口中获取其子窗口的window对象，又或者在子窗口中获取其父窗口的window对象。但是如果两个父子窗口存在跨域问题，那么将不能对获取到的window对象进行任何操作。即可以在跨域的情况下获取其子窗口或者父窗口的window对象，但是不能对获取到的window对象进行任何操作。如果进行了任何的操作，都会提示跨域的问题。但是有两个是例外。即使在跨域的情况下也可以对其进行设置。

①location属性：设置window准备跳转的页面。后面两种解决方法使用该属性。
②postMessage方法，H5之后添加的。

无论当前域名是什么，获取到的window对象的域名是什么。即使这两个域名之间存在跨域问题，在window对象中有一个属性location的设置和一个方法postMessage的调用不会受到跨域的影响。

2.1.addEventListener函数监听消息

addEventListener方法有两个参数：
①监听的时间类型：对于发送消息而言，固定为message。
②回调函数：在回调函数中一个参数event，event其中包含三个重要的属性：
1.data：表示接受到的消息内容，可能是字符串，可能是对象，取决有发送方。
2.origin：String类型，表示发送消息的域名地址
3.source：对象，表示发送消息的窗口对象。

window.addEventListener('message', funciton(event){$("#child").text($("#child").text() + '由' + event.origin + "发送过来的消息为："+event.data);
});

2.2.父传子-不同源

尽管同一源站策略阻止脚本访问不同源站的内容，但如果您同时拥有这两个页面，则可以使用window.postmessageand其相关消息事件在两个页面之间发送消息来解决此问题。

	  //父窗口var win=document.getElementById('WeiXinQRCodeFrame').contentWindow;win.postMessage ("测试", '*');//在iframe子页面window.addEventListener('message', function (event) {//event.data获取传过来的数据});

2.3.子传父-不同源

	  //父窗口parent.window.postMessage("测试", '*');//在iframe子页面window.addEventListener('message', function (event) {//event.data获取传过来的数据});

3.通过父页面操作子页面-同源

获取 iframe 页面中的元素。

3.1.值

document.getElementById('myframe').contentWindow.document.getElementById('V_ORGID').value = 111	$('#myframe').contents().find('#V_ORGID').val('111')

3.2.函数

document.getElementById("myframe").contentWindow.fn()

4.通过子页面操作父页面-同源

获取父页面中的元素。

4.1.值

window.parent.document.getElementById("ORGID").value = 111

4.2.函数

window.parent.fn()