iframe 跨域传参

最新推荐文章于 2024-07-19 16:10:40 发布

H_MZ

最新推荐文章于 2024-07-19 16:10:40 发布

阅读量657

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/crazycode2/p/11012743.html

版权

parent-index.html: （本地起服务，放在5000端口上）

<div class="content">
    <iframe src="http://localhost:5001/public/second.html" id="sendMessage" name="sendMessage" οnlοad="resize()"></iframe>	
</div>
<script type="text/javascript">
//当前脚本
function resize() {
    var ifr = document.getElementById('sendMessage');
    //使用iframe的window向iframe发送message。
    ifr.contentWindow.postMessage("123", "http://localhost:5001");
    window.addEventListener('message', function (e) {
        alert('回传 ' + e.data)
    })
}
</script>

child-second.html: （本地起服务，放在5001端口上）

<div class="content"> 
    <div id="howMuch">xxxxx</div>
</div>
<script type="text/javascript">
    window.addEventListener('message', receiver, false);
    function receiver(e) {
       if (e.data) {
           console.log(e)
           // 注释掉的为单次父子交互
           // var obj = {'name': 'qwer','age': 'xxx'}
           // e.source.postMessage(JSON.stringify(obj), e.origin);
           // console.log(e.data)
          document.getElementById('howMuch').onclick = function second() { 
              // 父子建立联系后，儿子html可以通过点击事件多次主动向父亲传值
              var obj = {'name': 'qwer','age': 'xxx'}
              window.parent.postMessage(JSON.stringify(obj), 'http://localhost:5000')
          }
      } else {
         alert(e.data);
     }
}
</script>

转载于:https://www.cnblogs.com/crazycode2/p/11012743.html