連著兩個項目遇到iframe，難受。

同域還好，不同域簡直爆炸。

當然幾經(jīng)折磨，還是有了辦法。

解決方案就是讓它們變同域了，那做法就是在父子兩個窗口設置一樣的 domain 。 當然這個 domain 也不是隨便設置的，至少保證二者有那么點類似，不然

常見改domain問題，意思就是dev.web.nd 不是你的127.0.0.1的后綴，不要瞎搞。

比如現(xiàn)在父窗口域名http://abc.dev.web.com ，子窗口域名http://d.ef.dev.web.com 那現(xiàn)在我們可以發(fā)現(xiàn)二者的域名后半部分dev.web.com是一樣的，那么我們就可以在兩個頁面的入口 js 文件內(nèi)寫上 document.domain = 'dev.web.com'，那么二者就同域了（本地測試考慮改host文件，或者將二者設為同域如127.0.0.1不同端口）.

總之，整體的思路就是取二者相同的域名部分來設domain（dev.web.com 不行就換 web.com，再不行就 com 總有一個能一樣吧?。?/p>

<iframe id="iframeId" name ="iframeName" frameborder="no" border="0" :src="resultUrl" width="100%;" height="100%;"></iframe>

那現(xiàn)在同域了以后就好辦了。

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節(jié)點綁定事件，一直綁不上事件的原因狠狠狠有可能就是你在父窗口的 ready（onload）中壓根就沒加載到 dom（iframe子窗口內(nèi)的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')