学步园

iframe介绍

父页面：

<input id="pbtn" type="button" value="父按钮" />
<iframe id="test" name="test" src="sub.html" scrolling="no"  frameborder="0" width="400px" height="150px"></iframe>
<div id="pmsg">父页面的内容</div>

 

子页面：

<input id="btn" type="button" value="button" />
<div id="pmsg">子页面的内容</div>

 

父页操作子页面：

var pbtn = document.getElementById("pbtn");
  pbtn.onclick = function(){
  var test = document.getElementById("test");
  getIframeDoc(test).getElementById("smsg").innerHTML = "子页面被修改了";
}
            
function getIframeDoc(elem){  
  return elem.contentDocument || elem.contentWindow.document;
}

子页面操作父页面：

var sbtn = document.getElementById("sbtn");
sbtn.onclick = function(){                    
  window.parent.document.getElementById("pmsg").innerHTML = "父页面内容被修改了";
}