首页 > 其他 > 详细

iframe 跨域传参

时间:2019-06-12 22:24:38      阅读:108      评论:0      收藏:0      [点我收藏+]

parent-index.html: (本地起服务,放在5000端口上)

<div class="content">
    <iframe src="http://localhost:5001/public/second.html" id="sendMessage" name="sendMessage" onload="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>

.

iframe 跨域传参

原文:https://www.cnblogs.com/crazycode2/p/11012743.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!