vue中iframe的使用及說明

更新時間：2022年09月13日 09:17:25 作者：芝士焗紅薯

這篇文章主要介紹了vue中iframe的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

關于iframe的使用

iframe在同域時能自由操作iframe和父框架的內容(DOM)，在跨域時可以實現(xiàn)頁面跳轉。

<iframe id="iframe" :src="iframeSrc" style="height: calc(100% - 50px)" width="100%" frameborder="0"></iframe>

獲取iframe里面的內容

iframe.contentWindow, 獲取iframe的window對象
iframe.contentDocument, 獲取iframe的document對象

const _iframe = document.getElementById('iframe').contentWindow

CDM跨域

如果你設置的iframe的域名和你top window的域名完全不同，可以使用CDM(cross document messaging)進行跨域消息的傳遞。

發(fā)送消息: 使用postmessage方法

postMessage(message, targetOrigin)

message: 傳遞給iframe的內容, 通常是string,最好不要傳object對象，需要傳對象時，使用JSON.stringfy轉換。
targetOrigin: 接受你傳遞消息的域名，可以設置絕對路徑，也可以設置""或者"/"。表示任意域名都行，"/"表示只能傳遞給同域域名。

_iframe.postMessage(JSON.stringify(_obj), '*')

接受消息: 監(jiān)聽message事件

當targetOrigin接受到message消息之后,會觸發(fā)message事件。 message提供的event對象上有3個重要的屬性，data,origin,source.

window.addEventListener('message', function (event) {
? ? ? console.log(event)
? ? ? if (event.origin === window.callBackUrl.iframeSrc) {
? ? ? ? _this.childData = event.data
? ? ? ? console.log(event.data)
? ? ? ? _this.saveForm()
? ? ? }
? ? })

使用iframe的總結

需求描述：在后臺管理系統(tǒng)中需要預覽配置的數(shù)據(jù)在手機上顯示的樣式，方便后臺管理人員操作，因為預覽的內容比較多，h5已經(jīng)寫好了一套代碼，所以利用iframe將h5的頁面展示引入到后臺

代碼展示

iframe：

<iframe
? id="iframe"
? ref="iframe"
? frameborder="0"
? class="iframe"
? :src="srcH5" ? //srcH5:預覽頁面的地址
/>
?
srcH5:'/iframeH5/preview',

父頁面給子頁面?zhèn)髦担?/p>

var iframe = document.getElementById('iframe');
var msg = {name:'張三'}
var childDomain = 'http://localhost:80/' ? //預覽頁面的域名
iframe.contentWindow.postMessage(msg, childDomain);

子頁面給父頁面?zhèn)髦担涸趍ounted中調用，避免未渲染完成，無法拿到數(shù)據(jù)

? ? ? ? //拿到父頁面?zhèn)鬟f的值
? ? ? ?window.addEventListener('message', (obj) => {
? ? ? ? ? this.obj = obj.data;?
? ? ? ? ? console.log('拿到數(shù)據(jù)了嗎', this.obj );
? ? ? ? }, false);
? ? ? ??
? ? ? ? //將預覽成功的信息返回給父頁面
? ? ? ? window.parent.postMessage({
? ? ? ? ? data: {
? ? ? ? ? ? code:'success'
? ? ? ? ? }
? ? ? ? }, '*');

父頁面監(jiān)聽子頁面返回的成功信息，做進一步操作

? ? ?window.addEventListener('message', this.handleMessage);
? ? ?// 監(jiān)聽h5頁面的通信
? ? ? handleMessage (event) {
? ? ? ? const data = event.data.data;
? ? ? ? if(data && data.code === 'success') {
? ? ? ? ? 。。。。。。
? ? ? ? }
? ? ? },

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: