连着两个项目遇到iframe，难受。
同域还好，不同域简直爆炸。
当然几经折磨，还是有了办法。
解决方案就是让它们变同域了，那做法就是在父子两个窗口设置一样的 domain 。 当然这个 domain 也不是随便设置的，至少保证二者有那么点类似，不然
常见改domain问题，意思就是dev.web.nd 不是你的127.0.0.1的后缀，不要瞎搞。
比如现在父窗口域名http://abc.dev.web.com ，子窗口域名http://d.ef.dev.web.com 那现在我们可以发现二者的域名后半部分dev.web.com是一样的，那么我们就可以在两个页面的入口 js 文件内写上 document.domain = 'dev.web.com'，那么二者就同域了（本地测试考虑改host文件，或者将二者设为同域如127.0.0.1不同端口）.
总之，整体的思路就是取二者相同的域名部分来设domain（dev.web.com 不行就换 web.com，再不行就 com 总有一个能一样吧！）
<iframe id="iframeId" name ="iframeName" frameborder="no" border="0" :src="resultUrl" width="100%;" height="100%;"></iframe>
那现在同域了以后就好办了。
1. 父窗口操作子窗口dom
JS
// 操作dom
document.getElementById("frameId").contentWindow.document.getElementById("ooxx").style.color="#F00"
// 操作方法
window.frames["iframeName"].childFun();
其中contentWindow属性支持所有主流浏览器，contentDocument被IE6,7拒了。
JQ
$('#iframeId').contents().find('ooxx').css('color','#F00')
注意
在实际使用中，我们可能会需要对iframe中的dom节点绑定事件，一直绑不上事件的原因狠狠狠有可能就是你在父窗口的 ready（onload）中压根就没加载到 dom（iframe子窗口内的dom何时加载完成不能确定），所以，一个比较 low 的做法是轮询下 dom 是否加载完全：
let findObj = setInterval (function () {
if ($("#iframeId").contents().find('ooxx').length > 0) {
clearInterval(findObj)
$("#iframeId").contents().on('click', 'ooxx', function() {
dosomething()
})
}
}, 1000)
还有一个要知道的就是可以在 iframe 的 src 中大做文章，很多时候可以把需要的一些信息附在src中，比如src='http://abc.dev.web.com?access_token=abc&mac_key=cfd 之类的，子窗口就可以通过读取url来操作，方便得很。
2. 子窗口操作父窗口
JS
首先搞懂几个对象：
- parent：父窗口 ;
- top：顶级父窗口。一种情况是top==parent，这时候两者没差别 ;
- self：当前窗口，即 window ;
- opener：open 方法打开窗口的原窗口 ;
// 操作dom
parent.document.getElementById("ooxx").style.color="#F00";
// 操作方法
parent.parentFun("ooxx");
JQ
$(parent).find('ooxx').css('color','#F00')
网友评论