zoukankan      html  css  js  c++  java
  • iframe 跨域传参

    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>

    .

  • 相关阅读:
    linux uniq 命令实用手册
    linux sort 命令实用手册
    linux awk 命令实用手册
    如何高效使用vim
    15个有趣好玩的linux shell 命令
    一篇文章带你编写10种语言HelloWorld
    如何用hugo 搭建博客
    c++中的exit()
    枚举数据类型C++
    常见的字符测试函数
  • 原文地址:https://www.cnblogs.com/crazycode2/p/11012743.html
Copyright © 2011-2022 走看看