在最近的項(xiàng)目里面,用到了不少關(guān)于iframe父子傳參通信的相關(guān)操作,記錄一下,雖然很簡(jiǎn)單,但是確實(shí)十分有用的;

iframe通信可以分為2種,跨域和非跨域兩種.分別說(shuō)明;

有一點(diǎn)很重要,iframe是可以給name 屬性的;給上name 屬性可以省下一些代碼;

非跨域 父調(diào)子

//父頁(yè)面<button class="b" id="b">點(diǎn)擊</button><iframe src="a.html" name='child' id="f"></iframe><script>  var ob=document.getElementById('b');  var msg='hellow,i'm your father!!'  ob.onclick=function(){    if(child.document.readyState=="complete"){      child.window.fnChild(msg); //關(guān)鍵    }  }</script>//子頁(yè)面<script>function fnChild (arg) {  console.log(arg); //確實(shí)得到了 hellow,i'm your father!!}</script>

父頁(yè)面調(diào)用子頁(yè)面使用 childFrameName.window.fnName();;當(dāng)然有一點(diǎn)很重要,你需要判斷iframe 里面的東西是否加載完成,如果加載未完成就調(diào)用的話是會(huì)報(bào)錯(cuò)的;
判斷iframe 加載是否完成有2種方法
1,childFrameName.document.readyState=="complete"來(lái)判斷;
2,childFrameName.onload=function(){} 使用onload 回調(diào)函數(shù),把調(diào)用的方法都寫(xiě)在這個(gè)回調(diào)函數(shù)里面;

非跨域 子調(diào)父

//在父頁(yè)面<div id="a" class="a"></div><iframe src="a.html" name='child' id="f"></iframe><script>  function changeColor(){    var oDiv=document.getElementById('a');    oDiv.style.backgroundColor="red";  }</script>//在子頁(yè)面<button class="ob" onclick="c()">anniu</button><script>  function c(){    parent.window.changeColor(); //關(guān)鍵  }</script>

同樣的,在子頁(yè)面調(diào)用父頁(yè)面的方法使用 parent.window.fnName()就可以了;

這種操作難免會(huì)遇到父頁(yè)面獲取子頁(yè)面的元素,或者子頁(yè)面獲取父頁(yè)面的元素進(jìn)行操作;

非跨域 父頁(yè)面獲取子頁(yè)面元素操作

首先,我們有幾種方法拿到子頁(yè)面的window對(duì)象或者doucument 對(duì)象,(還是使用上面的html)

//原生js 獲取子頁(yè)面window對(duì)象1, var childWindow=document.getElementById("f").contentWindow;2, var childWindow=document.getElementsByTagName('f')[0].contentWindow;//其實(shí)也就是普通的獲取方法,只是后面多了一個(gè)contentWindow;//jqueryvar childWindow=$('#f').contentWindow;//獲取子頁(yè)面的document對(duì)象 (假設(shè)已經(jīng)通過(guò)上面的方法得到了window對(duì)象)var frameDoc=childWindow.document;var frameBody=frameDoc.body;//jquery 也是跟上面的一樣var frameDoc=$(childWindow.document);//原生獲取元素childWindow.document.getElementById('a') //上面都已經(jīng)拿到了子頁(yè)面的window對(duì)象,所以獲取子頁(yè)面的元素也就只需要想普通操作那樣獲取就好childWindow.document.getElementById('a').style.color='red' //改個(gè)顏色//jq拿子頁(yè)面元素$('#f').contents().find('#a'); //$('#f').contents 這相當(dāng)于拿到了iframe 里面所有的dom;