vue 使用iframe載入外部html

2021-09-26 07:39:33 字數 1459 閱讀 2227

經過我反覆載入,我發現問題1的解法是錯誤滴,但是對於一些介面不是很長的可以適用,在這裡不刪除,做個教材。

問題1:iframe高度動態調整–自適應

以載入 為例

做完這些,載入出來的介面高度明顯小了不止一點,所以下面這塊才是關鍵。

mounted() ,
問題1修整:

原來的配方加點料@load="setinframeheight"寫在methods裡的方法;另外,htmlurl是放在本地的html位址。

最關鍵的還是setinframeheight方法,即在該方法中寫入賦值iframe的高度即可。

問題2:[violation] added non-passive event listener to a scroll-blocking event…

首先要明白passive event listeners是什麼?

通道一:

通道二:

在這裡呢,event listener是我主動加的監聽,所以我的解決辦法是,在第三個引數裡寫上:

mounted() );  是我自己寫的方法

}

問題3:uncaught domexception: blocked a frame with origin…

此問題又被稱作為:iframe跨域問題---------誘發原因是iframe和主視窗雙滾動條的情況,在兩者進行互動時,就會引申出來該問題。

自己的工程遇到時,嘗試解決辦法參考:

//主頁面 向 iframe傳遞事件

//主頁面

var frame = document.getelementbyid('iframeid');

frame.contentwindow.postmessage(object,'*');

//iframe頁面

iframe: window.addeventlistener('message',function(event))

//iframe向主頁面傳遞事件

//iframe頁面

window.parent.postmessage(object,'*');

//主頁面

window.addeventlistener('message',,function(event))

另外,加上問題1的高度自適應試試。

Vue使用iframe嵌入外部HTML檔案

專案開發的過程中,我們不可避免的會引入外部已經寫好的html檔案,那在不同的vue腳手架中如何成功引入html檔案呢?如何獲取到html檔案中的值呢?把要引入的檔案 假設是aaa.html檔案 放到static目錄下,在vue介面中引入 把要引入的檔案放到public目錄下,在vue介面中引入 注意...

vue 開發系列 vue使用外部js

在開發時我們會經常需要使用到外部的js,這樣我們需要引入外部js,然後進行使用。我們在開發的過程中需要使用到 sha256 將使用者的密碼進行加密傳輸。我們對js進行一點點改造。引入sha256,對其進行改造封裝 初始化方法 拉取需要加密資料 獲取結果 返回結果 function sha256 di...

vue元件中使用iframe元素

需要在本頁面中展示vue元件中的超連結,位址列不改變的方法 goback 需要使同層元素不被覆蓋,可以加 不過html5有新的dialog元素用於對話方塊。iframe的一些方法 獲取iframe內容 var iframe document.getelementbyid iframe1 var iw...