使用iframe+postMessage跨域操作和通信

場(chǎng)景

1. http://XXX/a.html（自己的）頁面要操作http://YYY/b.html（其他域名的） 2. 看了網(wǎng)上很多都是同域名下的，同域名下我自己就改了，還用的上iframe+postMessage？開玩笑

分析

直接操作肯定是沒戲，同源策略給你限制的死死的。所以要采用iframe+postMessage

實(shí)現(xiàn)

1.后端將b頁面轉(zhuǎn)出字符串，生產(chǎn)接口給前端調(diào)用（其實(shí)還是為了可以操作b頁面）

這里需要用到后端，后端拿到b頁面，將b頁面生存字符串，然后還需要將頁面所引用相對(duì)路徑替換成絕對(duì)路徑，不如頁面展示之后都是報(bào)錯(cuò)，無法往下執(zhí)行.比如頁面引入了一個(gè)圖片 <img src='./a.png' />,需要替換成<img src='http://YYY/a.png' /> js ，css同理

2.在a頁面的域名下創(chuàng)建一個(gè)新頁面c.html，用來展示b頁面轉(zhuǎn)換而成的字符串，c頁面操作如下

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

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

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

4.a，c頁面采用postMessage通信

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

5.總結(jié)

1.為什么不直接在a頁面展示字符串，還要嵌套一個(gè)iframe？

a頁面安全
如果b頁面有跳轉(zhuǎn)，報(bào)錯(cuò)等問題也影響不到a頁面（主要是我做的時(shí)候發(fā)現(xiàn)這兩個(gè)頁面引用了同一個(gè)js，因?yàn)閖s引用順序問題導(dǎo)致b頁面報(bào)錯(cuò)，所以才引入的iframe′⌒`）

2.為啥要把b頁面轉(zhuǎn)出字符串
為了能操作的無奈之舉，這么操作是為了將跨域的頁面b轉(zhuǎn)成同域名頁面c，在c操作b的dom

轉(zhuǎn)載于:https://www.cnblogs.com/liuhuanwen/p/11341148.html

總結(jié)

以上是生活随笔為你收集整理的使用iframe+postMessage跨域操作和通信的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。