vue中iframe使用以及結(jié)合postMessage實(shí)現(xiàn)跨域通信
使用場景
需求
在一個(gè)H5項(xiàng)目的頁面中以url的方式嵌入另一個(gè)項(xiàng)目的頁面。（不得不使用iframe）
而為了兼容移動(dòng)端api（封裝的一個(gè)移動(dòng)端api，iframe內(nèi)嵌頁面不生效），需要實(shí)現(xiàn)父子頁面的通信 （使用postMessage）。
iframe使用
基本使用
直接在頁面嵌套iframe標(biāo)簽指定src即可使用iframe。
<iframe src="xxx.html"></iframe>
常用屬性
frameborder：是否顯示邊框，1(yes),0(no)height：框架作為一個(gè)普通元素的高度。width：框架作為一個(gè)普通元素的寬度。name：框架的名稱，window.frames[name]時(shí)專用的屬性。scrolling：框架的是否滾動(dòng)。yes,no,auto。src：內(nèi)框架的地址，可以使頁面地址，也可以是圖片的地址。sandbox：對iframe進(jìn)行一些列限制，IE10+支持
更多屬性訪問： 這里
iframe高度自適應(yīng)
let ifr = document.getElementById('ifr')
const deviceHeight = document.documentElement.clientHeight;
ifr.style.height = (Number(deviceHeight)) + 'px';?vue中需要在mounted()中進(jìn)行高度初始化
獲取iframe的內(nèi)容
通過兩個(gè)主要的API：contentWindow 和 contentDocument
iframe.contentWindow，獲取iframe的window對象iframe.contentDocument，獲取iframe的document對象
var iframe = document.getElementById("iframe1");
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
console.log("window",iwindow);?? ?//獲取iframe的window對象
console.log("document",idoc);?? ?//獲取iframe的document
console.log("html",idoc.documentElement);?? ?//獲取iframe的html
console.log("head",idoc.head);?? ?//獲取head
console.log("body",idoc.body);?? ?//獲取body通過Name屬性，通過window提供的frames獲取
<iframe src ="xxx.html" id="ifr1" name="ifr1" scrolling="yes">
? ? <p>Your browser does not support iframes.</p>
</iframe>
<script type="text/javascript">
? ? console.log(window.frames['ifr1'].window);
? ? console.dir(document.getElementById("ifr1").contentWindow);
</script>window.frames['ifr1'] 返回的就是window對象，即 window.frames['ifr1']===window
同域下獲取父級/子級內(nèi)容
window.parent：獲取上一級的window對象，如果還是iframe則是該iframe的window對象window.top：獲取最頂級容器的window對象
iframe跨域
以下形式的跨域，可以使用iframe進(jìn)行解決。某一方使用iframe嵌套在另一方。
比如：http://www.foo.com/a.html 和 http://script.foo.com/b.html
兩個(gè)文件中分別加上 document.domain = 'foo.com'，指定相同的主域，然后,兩個(gè)文檔就可以進(jìn)行交互。
//b.html是以iframe的形式嵌套在a.html中
//www.foo.com上的a.html
document.domain = 'foo.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://script.foo.com/b.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
? ? var doc = ifr.contentDocument || ifr.contentWindow.document;
? ? // 在這里操縱b.html
? ? alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};
//script.foo.com上的b.html
document.domain = 'foo.com';默認(rèn)情況下 document.domain 是指 window.location.hostname ?？梢允謩?dòng)更改，但是最多只能設(shè)置為主域名。 通常，主域名就是指不帶www的hostname, 比如: foo.com , baidu.com 。
如果，帶上www或者其他的前綴，就是二級域名或者多級域名。通過上述設(shè)置，相同的domain之后，就可以進(jìn)行同域的相關(guān)操作。
如果設(shè)置的iframe的域名和 top.window 的域名完全不同。則可以使用postMessage()進(jìn)行通信
postMessage通信
window.postMessage() 方法可以安全地實(shí)現(xiàn)跨源通信。通常，對于兩個(gè)不同頁面的腳本，只有當(dāng)執(zhí)行它們的頁面位于具有相同的協(xié)議（通常為https），端口號(hào)（443為https的默認(rèn)值），以及主機(jī) (兩個(gè)頁面的模數(shù) Document.domain設(shè)置為相同的值) 時(shí)，這兩個(gè)腳本才能相互通信。window.postMessage() 方法提供了一種受控機(jī)制來規(guī)避此限制，只要正確的使用，這種方法就很安全。
具體使用方式參考：window.postMessage
<iframe src="http://xxx.com" name="sendMessage"></iframe>
父頁面向子頁面?zhèn)鬟f信息：
// 父頁面js
let ifr = window.frames['sendMessage'];
// 向子頁面發(fā)送message
ifr.postmessage('give u a message', "http://xxx.com");
// xxx.com頁面js
// 監(jiān)聽父頁面?zhèn)鱽淼男畔?
window.addEventListener('message', receiver, false);
function receiver(e) {
? ? if (e.origin == 'http://xxx.com') {
? ? ? ? if (e.data == 'give u a message') {
? ? ? ? ? ? e.source.postMessage('received', e.origin); ?// 向原網(wǎng)頁返回信息
? ? ? ? } else {
? ? ? ? ? ? alert(e.data);
? ? ? ? }
? ? }
}在vue中使用
<iframe :src="src" ref="iframe" frameborder="0"></iframe>
1.要將獲取到iframe的contentWindow屬性放到mounted這個(gè)鉤子函數(shù)中。
mounted() {
? ? this.iframeWin = this.$refs.iframe.contentWindow;
}2.子頁面向父頁面?zhèn)髦?/p>
父頁面代碼：
// 父頁面監(jiān)聽子頁面?zhèn)鱽淼男畔?
mounted() {
? ? window.addEventListener('message', this.handleMessage);
? ? this.iframeWin = this.$refs.iframe.contentWindow;
},
methods: {
? ? handleMessage (event) {
? ? ? ? const data = event.data.data
? ? ? ? if(data.info === "success"){
? ? ? ? ? ? alert(data.data)
? ? ? ? }
? ? }
}子頁面代碼：
sendMessage() {
? ? // 向父頁面發(fā)送信息
? ? window.parent.postMessage({
? ? ? ? data: {
? ? ? ? ? ? info:"success",
? ? ? ? ? ? data:"我是子頁面的test！"
? ? ? ? }
? ? }, '*');
}
3.父頁面向子頁面?zhèn)鬟f信息同理
sendMessage () {
? ? // 向子頁面?zhèn)鲾?shù)據(jù),需要注意這里沒有parent
? ? this.iframeWin.postMessage({
? ? ? ? info: 'success',
? ? ? ? data: "我是來自父頁面的data!"
? ? }, '*')
}注意父向子傳遞信息的時(shí)候，要等子頁面加載完成后，再進(jìn)行通信
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue接入ts基本方法，關(guān)于ts，也出了很久，下面我們就來簡單學(xué)習(xí)了下ts并且在原有項(xiàng)目上接入基本ts語法，也算是一個(gè)初級嘗試，簡單梳理下基礎(chǔ)的接入配置和已經(jīng)遇到的問題，供需要的小伙伴們參考2022-01-01
基于vue-cli 路由 實(shí)現(xiàn)類似tab切換效果（vue 2.0）
這篇文章主要介紹了基于vue-cli 路由 實(shí)現(xiàn)類似tab切換效果（vue 2.0），非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
如何搭建一個(gè)完整的Vue3.0+ts的項(xiàng)目步驟
這篇文章主要介紹了如何搭建一個(gè)完整的Vue3.0+ts的項(xiàng)目步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)zip文件下載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
在Vant的基礎(chǔ)上實(shí)現(xiàn)添加表單驗(yàn)證框架的方法示例
這篇文章主要介紹了在Vant的基礎(chǔ)上實(shí)現(xiàn)添加驗(yàn)證框架的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
Vue項(xiàng)目打包部署全過程(history模式)
vue項(xiàng)目中我們比較常用的模式為hash和history模式,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包部署的全過程,講解的是vue-router中history模式的部署,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
vue實(shí)現(xiàn)前臺(tái)列表數(shù)據(jù)過濾搜索、分頁效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)前臺(tái)列表數(shù)據(jù)過濾搜索、分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了?vue3??mixin?混入使用方法，mixin?混入，提供了一種非常靈活的方式，來分發(fā)?vue?組件中的可復(fù)用功能，一個(gè)mixin?對象可以包含任意組件選項(xiàng)，當(dāng)組件使用?mixin?對象時(shí)，所有的?mixin?對象的選項(xiàng)將被混入組件本身的選項(xiàng)。,需要的朋友可以參考一下2021-11-11
Vue插值、表達(dá)式、分隔符、指令知識(shí)小結(jié)
這篇文章主要介紹了Vue插值、表達(dá)式、分隔符、指令的相關(guān)知識(shí)，文中給大家提到了去除vue插值表達(dá)式{{}}的方法,需要的朋友可以參考下2018-10-10
本篇文章主要介紹了vue+iview寫個(gè)彈框的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12