iframe 的那些事儿

项目中有不少地方用到iframe，今儿把使用iframe遇到的一些问题一块儿总结一下。

1、javascript监听iframe加载完成事件

iframe加载过程需要一定时间，这个加载过程常常出现白屏，导致体验不好，所以需要加loading图提高体验，那么，loading要在什么时刻隐藏呢？这就需要我们监听iframe加载完成的事件，如下图所示：

2、iframe高度问题

css:

body{margin:0; padding:0;} ；  // 首先设置样式：如果不设置body的margin和padding为0的话，页面上下左右会出现空白。

html:

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>

.scroll-wrapper {
   -webkit-overflow-scrolling: touch;
   overflow-y: scroll;
   /* 提示: 请在此处加上需要设置的大小(dimensions)或位置(positioning)信息! */
}

.scroll-wrapper iframe {
   /* 你自己指定的样式 */
}

参考地址：https://davidwalsh.name/scroll-iframes-ios

iframe 的那些事儿

推荐阅读