iframe 父页面传值给子页面

父页面

<body> 
    父级：A页面<br/><br/>
    <button id="children_button">传值给子元素 </button>
    <iframe src="XXX" width="500px" height="200px" id="iframe"></iframe> 
    <script> 
        let iframe = document.getElementById('iframe');
        document.getElementById("children_button").onclick = function(){ 
            var param = {'age':'10'};
            iframe.contentWindow.postMessage(param,'*');
        }         
    </script> 
</body>

子页面

<body> 
    子级：B页面<br/>
    <button id="b_button">B页面接收A页面数据</button><br/> 
    <script> 
      window.addEventListener('message', function(e) {
              document.getElementById("b_button").innerHTML=JSON.stringify(e.data);
              alert(JSON.stringify(e.data));
      })
    </script>
</body>

 

 posted on 2021-05-25 13:53  会飞的金鱼  阅读(631)  评论(0)    收藏  举报