使用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