vue 使用iframe加載外部html

經過我反覆加載，我發現問題1的解法是錯誤滴，但是對於一些界面不是很長的可以適用，在這裏不刪除，做個教材。
問題1：iframe高度動態調整–自適應
以加載 https://www.baidu.com/ 爲例

 <div style="height:auto;">
        <iframe id="show-iframe" frameborder="0" scrolling="yes" style="background-color:transparent; position：absolute;width: 100%;
         height:100%; top: 0;left:0;bottom:0;" src='https://www.baidu.com/'></iframe>
      </div> 

做完這些，加載出來的界面高度明顯小了不止一點，所以下面這塊纔是關鍵。

 mounted() {
 
    /**
     * iframe-寬高自適應顯示   
     */
    const oIframe = document.getElementById('show-iframe');
    const deviceWidth = document.documentElement.clientWidth;
    const deviceHeight = document.documentElement.clientHeight;
    oIframe.style.height = (Number(deviceHeight)+100) + 'px'; //數字是頁面佈局高度差，其中的100可以根據自己的界面進行調整


 },

問題1修整：
原來的配方加點料@load="setInframeHeight"寫在methods裏的方法；另外，htmlUrl是放在本地的HTML地址。

<div  style="height:auto;">

        <iframe id="show-iframe" frameborder="0" scrolling="yes" style="background-color:transparent; position：absolute;width: 100%;
         height:100% ; top: 0;left:0;bottom:0;" :src='htmlUrl' alt="未加載出來" @load="setInframeHeight"></iframe>
      </div>

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

問題2：[Violation] Added non-passive event listener to a scroll-blocking event…
首先要明白Passive Event Listeners是什麼？
通道一：https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
通道二：https://blog.csdn.net/dj0379/article/details/52883315
在這裏呢，event listener 是我主動加的監聽，所以我的解決辦法是，在第三個參數裏寫上： {passive: true}

mounted() {
   window.addEventListener('scroll', this.showmenu,   {passive: true});//this.showmenu  是我自己寫的方法
   }

問題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的高度自適應試試。