1、首先来说一下iframe是干什么用的
IFRAME是HTML标签，作用是文档中的文档，或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架（即行内框架），通俗点说就是在一个页面中通过写iframe标签来嵌入另一个页面
2、代码的实现
首先是父元素
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>iframe父子页面互调</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> </head> <body> <h2>子页面调用postMessage，父页面通过监听来获取子页面的数据</h2> <div style="400px; height: 200px;"> <iframe src="son1.html" frameborder="0" style="100%; height: 100%;"></iframe> </div> <div id="output"></div> <h2>子页面调用父页面的一些方法</h2> <script> window.addEventListener('message', function (e) { console.log(e.data); var data = e.data; if (data.txt) { var output = document.getElementById('output'); output.innerHTML = `新的名字是：${data.txt}`; } }, false); function fun() { console.log('这是父页面打印出的'); } </script> </body> </html>
下面是子元素的代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>子页面</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div style="300px; height: 180px; border:1px solid #000"> 请输入一些值：<input type="text" id="text1" /> <button onclick="sendMessageToParent()">设置</button> <button onclick="click()"> 点击调用父元素的方法 </button> </div> <script> function sendMessageToParent() { //设置test键值下的内容等于input框中的内容 var txt = document.getElementById('text1').value; // 下面也可以用（window.parent.postMessage({txt:txt});） top代表父元素的最顶层 window.top.postMessage({ txt: txt }); } // 调用父元素的方法 $(function () { parent.fun(); }) </script> </body> </html>
3、将代码复制下来 打开就OK了
注意：此代码会涉及到一下跨域问题 关于浏览器本地跨域的问题 参照我下一篇文章