iframe父子页面传值(小案例)

iframe.html

  <button id="send">确认事件</button>
  <div id="content"></div>

  window.onload = function() {
    var btn = document.getElementById("send");
    var transObj = {
      target: "求救事件",
      content: "有人晕倒了"
    };
    window.top.postMessage(JSON.stringify(transObj), "*");  // 向index传值
    btn.onclick = function() {
      transObj = {
        target: "志愿者事件",
        content: "附近有3个志愿者"
      };
      window.top.postMessage(JSON.stringify(transObj), "*"); // 向index传值
    };
  };
  window.addEventListener("message", function(e) {
    console.log(e);
    var data = JSON.parse(e.data);   // 接受index传过来的值
    document.getElementById("content").innerHTML =
      "事件：" + data.target + "<br/>内容：" + data.content;
  });

index.html

 <iframe style="width: 400px;height:300px;" id="ifr" src="./iframes.html"></iframe>
    <p>
      <button id="btn" >拨打电话</button>
    </p>
    <p>接收：iframe数据：
        <ul id="list"></ul>
    </p>



  window.onload = function() {
    var ifrWin = document.getElementById("ifr").contentWindow;
    document.getElementById('btn').onclick = function(){
        var transObj = {
            target: "拨打电话事件",
            content: "已经给18888888888号码拨打电话"
        };
        ifrWin.postMessage(JSON.stringify(transObj), "*");  // 向iframe传递值
    }
  };
  window.addEventListener(
    "message",
    function(e) {
      console.log(1111111,e);
      var data = JSON.parse(e.data);  //接收iframe传递的值
      var list =  document.getElementById('list');
      setTimeout(function(){
        list.innerHTML= list.innerHTML+'<li>事件：<b>'+data.target+'</b>&nbsp;内容：<b>'+data.content+'</b>';
      },800)
    },
    false
  );