簡單講解下vue內嵌iframe並跨域通訊

2021-10-05 14:18:28 字數 1112 閱讀 8733

1、vue元件中如何引入iframe?

2、vue如何獲取iframe物件以及iframe內的window物件?

3、vue如何向iframe內傳送資訊?

4、iframe內如何向外部vue傳送資訊?

一、vue元件中如何引入iframe?

如上,直接通過新增iframe標籤,src屬性繫結data中的src,第一步引入就完成了

二、vue如何獲取iframe物件以及iframe內的window物件?

在vue中,dom操作比如上jquery的$('#id')的簡單,但是也有方法,就是通過ref

然後就是獲取iframe的window物件,因為只有拿到這個物件才能向iframe中傳值

三、vue如何向iframe內傳送資訊?

通過postmessage,具體關於postmessage是什麼,自己去google,

我的理解postmessage是有點類似於udp協議,就像簡訊,是非同步的,你發資訊過去,但是沒有返回值的,只能內部處理完成以後再通過postmessage向外部傳送乙個訊息,外部監聽message

為了讓postmessage像tcp,為了體驗像同步的和實現多通訊互不干擾,特別制定的message結構如下

}

通過cmd來區別這條message的目的

具體**如下

向iframe傳送資訊

四、iframe內如何向外部vue傳送資訊?

現在通過單擊『向iframe傳送資訊』這個按鈕,從外部vue中已經向iframe中傳送了一條資訊

}

那麼iframe內部如何處理這個資訊?

至此為止,內部的收發資訊和外部的收發資訊都已解決!

下面是完整**:

提交

vue計算屬性簡單講解

計算屬性都以函式的形式寫在 vue 例項內的 computed 選項內,最終返回計算後的結果。乙個計算屬性裡可以完成各種複雜的邏輯,包括運算 函式呼叫等,只要最終返回乙個結 果就可以。例子 lang en charset utf 8 name viewport content width devic...

vue學習起步 了解下

有這麼一句話,vue是漸進式框架。抽取 漸進式框架 和 自底向上增量開發的設計 這兩個概念是什麼?中的解釋 漸進式代表的含義是 主張 主張指使用時的硬性要求 最少。來個對比就知道什麼叫主張最少 比如說,angular,它兩個版本都是強主張的,如果你用它,必須接受以下東西 在生活中含義是為了保證各施工...

4 12 Lvm講解(下)拓展捲組

拓展捲組 檢視下卷組資訊 root evan 01 vgs vg pv lv sn attr vsize vfree centos 1 2 0 wz n 19.00g 0 vg1 2 1 0 wz n 1.99g 1.70g root evan 01 當邏輯卷持續增大,增大到超過捲組大小的時候,我們...