使用iframe+postMessage跨域操做和通訊

使用iframe+postMessage跨域操做和通訊

場景

1. http://XXX/a.html（本身的）頁面要操做http://YYY/b.html（其餘域名的）
2. 看了網上不少都是同域名下的，同域名下我本身就改了，還用的上iframe+postMessage？開玩笑

分析

直接操做確定是沒戲，同源策略給你限制的死死的。因此要採用iframe+postMessage

實現

1.後端將b頁面轉出字符串，生產接口給前端調用（其實仍是爲了能夠操做b頁面）

這裏須要用到後端，後端拿到b頁面，將b頁面生存字符串，而後還須要將頁面所引用相對路徑替換成絕對路徑，不如頁面展現以後都是報錯，沒法往下執行.好比頁面引入了一個圖片 <img src='./a.png' />,須要替換成<img src='http://YYY/a.png' /> js ，css同理

2.在a頁面的域名下建立一個新頁面c.html，用來展現b頁面轉換而成的字符串，c頁面操做以下

<div id='patch'></div>
    var patchNode = document.getElementById('patch')
    var objE = document.createElement("div")
    objE.innerHTML = '請求下來的字符串'
    patchNode.appendChild(objE)

3.a頁面採用iframe加載c頁面

<iframe id="iframe_child" src="./c.html"></iframe>

4.a，c頁面採用postMessage通訊

a頁面操做以下 發生內容給iframe
    $(`#iframe_child`).on('load', function(){ // 和iframe通訊
        var data = {
            act: 'article',  // 自定義的消息類型。
            msg: {
                subject: '111'
            }
        };
        // 不限制域名則填寫 * 星號
        $(`#iframe_child`).contentWindow.postMessage(data, '*')
    });
    // 對來自 c.html 的消息進行處理
    window.addEventListener('message', function(e){
        if (e.data.act == 'response') {
            console.log(`進行接收以後的操做---${e.data.msg.answer}`)
        }
    }, false)
    
    c頁面操做以下
    
    window.addEventListener('message', function(e){
        if (e.data.act == 'article') {
          var article = e.data.msg
          console.log(`接收的信息爲`${article.subject})
          window.parent.postMessage({ // 傳遞給父頁面單次操做完畢
            act: 'response', 
            msg: {
              answer: '我收到信息了'
            }
          }, '*');
    
        } else {
        console.log('未定義的消息: '+ e.data.act)
      }
  }, false);
  在c頁面直接操做b頁面的字符串生成的dom，間接實現a操做b頁面

5.總結

1.爲何不直接在a頁面展現字符串，還要嵌套一個iframe？

a頁面安全

若是b頁面有跳轉，報錯等問題也影響不到a頁面（主要是我作的時候發現這兩個頁面引用了同一個js，由於js引用順序問題致使b頁面報錯，因此才引入的iframe′⌒`）

2.爲啥要把b頁面轉出字符串

爲了能操做的無奈之舉，這麼操做是爲了將跨域的頁面b轉成同域名頁面c，在c操做b的dom