vue 使用iframe加载外部html
vue使用iframe加载外部html,iframe高度自适应,non-passive event listener ,iframe跨域
经过我反复加载,我发现问题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的高度自适应试试。
更多推荐
所有评论(0)