项目中有不少地方用到iframe,今儿把使用iframe遇到的一些问题一块儿总结一下。
1、javascript监听iframe加载完成事件
iframe加载过程需要一定时间,这个加载过程常常出现白屏,导致体验不好,所以需要加loading图提高体验,那么,loading要在什么时刻隐藏呢?这就需要我们监听iframe加载完成的事件,如下图所示:
2、iframe高度问题
css:
body{margin:0; padding:0;} ; // 首先设置样式:如果不设置body的margin和padding为0的话,页面上下左右会出现空白。
html:
<iframe src="XXX" id="myiframe" scrolling="no" frameborder="0" οnlοad="changeFrameHeight()" ></iframe>
js:
function changeFrameHeight(){ var ifm= document.getElementById("myiframe"); ifm.height=document.documentElement.clientHeight; } window.onresize=function(){ changeFrameHeight(); }
3.解决 iframe 在 iOS设备上Safari中超出边界的部分 不能滚动的问题
⚠️ -webkit-overflow-scrolling: touch; 属性值就是专为浏览器中溢出(overflow)时需要滚动的元素设计的。
如果没有指定这个属性,当你想滚动iframe时,实际上会导致外层页面的滚动,通过它你就可以对IFRAME的滚动进行控制!
<div class="scroll-wrapper">
<iframe src=""></iframe>
</div>
.scroll-wrapper { -webkit-overflow-scrolling: touch; overflow-y: scroll; /* 提示: 请在此处加上需要设置的大小(dimensions)或位置(positioning)信息! */ } .scroll-wrapper iframe { /* 你自己指定的样式 */ }
参考地址:https://davidwalsh.name/scroll-iframes-ios