iframe

iframe元素会创建包含另外一个文档的内联框架。

以下代码在本地文件夹会报跨域的错误，需要live server在本地启动服务打开页面。

1 子访问父：

以下代码点击按钮调用setMsg函数，id为msg的元素里会显示Hello World!!
parent.html:

<body> 
    <div>等到的信息：<div id="msg"></div></div> 
    <iframe frameborder="1" width="400" height="400" src="son.html" scrolling="no" id="myiframe"></iframe> 
</body>

son.html:

<body> 
    <input type="button" onClick="setMsg()" value="setMsg"> 
    <script>  
    　　function setMsg(){ 
　　　　　　var msg = window.parent.document.getElementById("msg"); 
　　　　　　msg.innerHTML= "Hello world!!"; 
　　　　} 
　　</script> 
</body>11

2 父访问子：

以下代码点击按钮触发setMsg函数，id为setMsg的元素会显示Hello World!!

parent.html:

<body>
    <div>等到的信息：<div id="setMsg"></div></div> 
　　<input type="button" value="setMsg" onClick="setMsg()"><br> 
　　<iframe frameborder="1" width="400" height="400" src="test2.html" scrolling="no" id="myiframe"></iframe> 
　　<script type="text/javascript"> 
　　　　function setMsg(){ 
　　　　　　var obj = document.getElementById("myiframe"); 
　　　　　　var msg = obj.contentDocument.getElementById("msg").innerHTML; 
　　　　　　document.getElementById("setMsg").innerHTML = msg; 
　　　　} 
　　</script> 
</boyd>

son.html:

 
<body> 
    <div id="msg">Hello world!!!</div> 
</body>

转载自：https://segmentfault.com/a/1190000007090201