1.9.1.IFrame communication

1.Introduction

  • 讓iframe發送訊息給parent (iframe是發送訊息的一方, parent是接收訊息的一方)

  • HTML5的postMessage可在不同網頁間送資料, 可以使用window.open開啟另一網域的資料將文字訊息傳過去, 或是使用contentWindow取得IFrame載入的頁面

2.Implementation

  • 1.在不同網頁間傳遞訊息

    • parent (傳訊息)

        <script>
      var new_win;

      /* 開啟另一個網頁 */
      function openWin() {
          new_win = window.open("http://demo2.cinc.biz/html5-postmessage/text-new.html");
      }

      /* 傳送文字訊息 */
      function sendMsg() {
          var msg = document.getElementById("msg_txt").value;
          new_win.postMessage(msg, "http://demo2.cinc.biz");//表示要送給demo2.example.com網域
      }
  </script>

    • IFrame (收訊息)

        <script>
      var myMsg = function(e) {
          alert("接收到的訊息：" + e.data);
          alert("訊息來源網域：" + e.origin);
          if (e.origin != "http://demo.cinc.biz") {
              alert("不明來源,不處理");
              return; //不明來源,不處理
          }

          document.getElementById("res").innerHTML = "接收到的訊息：" + e.data;
      };
      window.addEventListener("message", myMsg, false);//監聽message事件
  </script>

  • 2.IFrame傳訊息給parent

    • parent (傳/收訊息)

      <script>
  // Create the iframe
  var iframe = document.createElement('iframe');
  iframe.setAttribute('src', iframeSource);
  iframe.setAttribute('id', 'the_iframe');
  iframe.style.width = 450 + 'px';
  iframe.style.height = 200 + 'px';
  document.body.appendChild(iframe);
  // Send a message to the child iframe
  var iframeEl = document.getElementById('the_iframe'),
      messageButton = document.getElementById('message_button'),
      results = document.getElementById('results');
  // Send a message to the child iframe
  var sendMessage = function(msg) {
      // Make sure you are sending a string, and to stringify JSON
      iframeEl.contentWindow.postMessage(msg, '*');
  };
  // Send random messge data on every button click
  bindEvent(messageButton, 'click', function (e) {
      var random = Math.random();
      sendMessage('' + random);
  });
  // Listen to message from child window
  bindEvent(window, 'message', function (e) {
      results.innerHTML = e.data;
  });
</script>

    • IFrame (傳/收訊息)

      <script>
  // addEventListener support for IE8
  function bindEvent(element, eventName, eventHandler) {
      if (element.addEventListener) {
          element.addEventListener(eventName, eventHandler, false);
      } else if (element.attachEvent) {
          element.attachEvent('on' + eventName, eventHandler);
      }
  }
  // Send a message to the parent
  var sendMessage = function (msg) {
      // Make sure you are sending a string, and to stringify JSON
      window.parent.postMessage(msg, '*');
  };
  var results = document.getElementById('results'),
      messageButton = document.getElementById('message_button');
  // Listen to messages from parent window
  bindEvent(window, 'message', function (e) {
      results.innerHTML = e.data;
  });
  // Send random message data on every button click
  bindEvent(messageButton, 'click', function (e) {
      var random = Math.random();
      sendMessage('' + random);
  });
</script>

3.Reference

Previous1.9.IFrameNext1.9.2.IFrame contentWindow property

Last updated