Vue下iframe如何實現和父視窗的通訊

2022-08-30 15:24:31 字數 954 閱讀 4308

在父視窗頁面**:

1

2dialog

3 title=""

4 :visible.sync="visible"

5 width="30%"

6 class="ifr-dialog"

7center

8 @opened="handleopened">910

1112

1314

15

view code

在iframe頁面:

hello, world!

當前視窗將在5秒後自動關閉!

這裡需要注意的是:

1、在vue中是通過給iframe元件新增ref值來註冊引用資訊,引用指向的就是dom元素,註冊之後就可以通過$refs來查到對應的dom元素物件了。

2、只有當元素渲染出來之後,在$refs中才能看到對應的dom元素,所以我把下面這句話放在對話方塊開啟之後執行,而不是放在mount方法裡執行。

this.iframewin = this.$refs.iframe.contentwindow;

3、需要註冊監聽事件:

window.addeventlistener('message', this.handlemessage);

4、給物件推送訊息:

// 向父vue頁面傳送資訊

window.parent.postmessage(}

}, '*');

// 外部vue向iframe內部傳資料

this.iframewin.postmessage(

}, '*')

如何實現Iframe透明

ie5.5和nn6以上的瀏覽器支援 frame iframe物件的allowtransparency 方法,如果某物件的背景顏色設定為transparency的,它將繼承包含它容器的特性。我們可以通過這個特性實現透明背景的開 關。如下 a.html如下 此iframe無背景顏色 body b.htm...

如何實現Iframe透明

doctype html public wcdtd xhtml stricten httpwwwworgtrxhtmldtdxhtml strictdtd 如下 a.html如下 此i無背景顏色 body b.html如下 此i 設為綠色。body 如果a.html透明的,它將繼承i的背景顏色 如果...

如何實現 iframe 子頁面和父頁面聯調?

目錄通過 chrome 開發者工具編輯 iframe src 的方式來達到實時預覽,然後過載 iframe 來看最新效果 為已有系統擴充套件乙個 iframe 子頁面,該子頁面風格比較獨特,又需要讓子頁面在系統和諧融入時,用來除錯可以節省大量時間,比從頭搭框架要來的快得多 就比如我有乙個藍色調的後台...