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的高度自适应试试。