vue嵌入iframe的問題

問題來源：客戶要求展現一些文檔，而且文檔是現成的，打包好的html，直接嵌入到頁面就行。可是中間仍是遇到一些問題，記錄一下。

vue中嵌入iframe

<iframe src="靜態文件路徑" frameborder="0" scrolling="auto"></iframe>
複製代碼

項目用的是vueCli3.0腳手架搭建的，這裏咱們須要引入的靜態HTML就放在public下面的static文件夾下面。以下所示：

須要注意的是：iframe的src屬性直接寫「static/index.html」便可，這裏src的根路徑就是public。

以前不管把HTML放在哪裏，都是404，搞了很久。

引入進來以後，還有一個問題，就是iframe的滾動條和外層父容器的滾動條出現了兩個滾動條。爲了美觀和用戶體驗，這裏確定要去掉一個。

我選擇去掉外層父容器的滾動條。這裏就涉及到iframe的高度應該取多少，根據計算不一樣分辨率，讓網頁全文高度減去112，這樣iframe就是<100%外層高度，不至於觸發外層的滾動條。

還有一個問題，當頁面切換到別的頁面，而後再切回iframe所在頁面，因爲created不會再觸發，全部又會出現兩個滾動條。

因此咱們寫一個監聽器，當路由回到該頁面時，再次計算iframe合理高度。

這樣，就算是解決了兩個滾動條的問題。頁面只須要滾動iframe的滾動條就能夠愉快的查看文檔了。

最後

歡迎關注個人微信公衆號【熱前端】，一塊兒交流成長。