如何實現(xiàn)iframe父子傳參通信

//父頁面
<button class="b" id="b">點擊</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); //關鍵
    }
  }
</script>

//子頁面
<script>
function fnChild (arg) {
  console.log(arg); //確實得到了 hellow,i'm your father!!
}
</script>

//在父頁面
<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>

//在子頁面
<button class="ob" onclick="c()">anniu</button>
<script>
  function c(){
    parent.window.changeColor(); //關鍵
  }
</script>

//原生js 獲取子頁面window對象
1, var childWindow=document.getElementById("f").contentWindow;
2, var childWindow=document.getElementsByTagName('f')[0].contentWindow;
//其實也就是普通的獲取方法,只是后面多了一個contentWindow;
//jquery
var childWindow=$('#f').contentWindow;

//獲取子頁面的document對象 (假設已經(jīng)通過上面的方法得到了window對象)
var frameDoc=childWindow.document;
var frameBody=frameDoc.body;
//jquery 也是跟上面的一樣
var frameDoc=$(childWindow.document);

//原生獲取元素
childWindow.document.getElementById('a') //上面都已經(jīng)拿到了子頁面的window對象,所以獲取子頁面的元素也就只需要想普通操作那樣獲取就好
childWindow.document.getElementById('a').style.color='red' //改個顏色

//jq拿子頁面元素
$('#f').contents().find('#a'); //$('#f').contents 這相當于拿到了iframe 里面所有的dom;

//原生js
window.parent.document.getElementById('a'); //window.parent獲取到父頁面的window對象,那么接可以使用一般操作獲取元素
window.parent.document.getElementById('a').style.color="red";//dom操作
//jquery
$("#a",parent.document); //$(父頁面元素選擇器, parent.document);
$("#a",parent.document).css('border','1px solid red');

otherWindow.postMessage(message, targetOrigin, [transfer]);
//otherWindow 窗口對象
// message 傳遞的消息,可以是對象,可以是字符串
// target 目標窗口,* 代表所有;

//子頁面
<div id="loginBox">登錄窗口</div>
<div id="close"></div>

//父頁面
<div id="loginMask">
  <iframe src="子頁面"></iframe>
</div>

//子頁面
<script>
  let oClose=document.getElementById('#close');
  oClose.onclick=function(){
    window.parent.postMessage('close','*');
  }
</script>
//父頁面
<script>
  window.addEventListener('message',function(event){
    if(event.data=='close'){
      let oLoginMask=document.getElementById('loginMask');
      oLoginMask.style.display="none";
    }
  })
</script>

//父頁面
<button id="btn">傳遞消息</button>
<iframe id='f' src="子頁面.html"></iframe>
//子頁面
<div id="a"></div>

//父頁面
<script>
  let oBtn=document.getElementById('btn');
  let oFrame=document.getElementById('f');
  oBtn.onclick=function(){
    oFrame.contentWindow.postMessage('hello','*');
  }
</script>

//子頁面
<script>
  window.addEventListener('message',function(){
    if(event.data=='hello'){
      document.getElementById('#a').innerText=event.data;
    }
  })
</script>