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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章