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="width:400px; height: 200px;"> <iframe src="son1.html" frameborder="0" style="width: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="width: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了
注意：此代碼會涉及到一下跨域問題 關於瀏覽器本地跨域的問題 參照我下一篇文章