• 欢迎访问大姚哥前端笔记
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧
  • 欢迎留言o(∩_∩)o 哈哈

iframe自适应高度解决方法

JavaScript dayaoge 1144次浏览

本篇只讨论一种自适应情况,父页面和子页面同域名。
子页面加载完成后,获取页面高度,并添加到location.hash上。
父页面做个定时器,监测location.hash上值的变化。
获取来之后,设置iframe的高即可。
1.子页面

var h = $("body").outerHeight(true);
window.top.location.hash = "#height=" + h;

2.父页面

var reinitIframe =  function(){
    var iframe = document.getElementById("IframeUrl");
   
        var hash = window.location.hash.slice(1);  
        if (hash && /height=/.test(hash)) {
            var h = hash.replace("height=", "");
            iframe.height=h; 
            iframe.style.height=h+"px";
            if(h!=oldh){
                oldh=h;
            }
        }else{
            iframe.height=iframe.contentWindow.document.body.scrollHeight;  
            iframe.style.height=iframe.contentWindow.document.body.scrollHeight+"px";  
        }

    window.setTimeout(function(){
        reinitIframe();
    }, 400);
}

这样就可以近乎完美的解决IOS下IFrame无法滚动的问题。
外层在套一层div.并设置宽高。div样式添加:

-webkit-overflow-scrolling: touch;overflow-y: scroll;

通过上面方法改变iframe的高即可。


小白公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明iframe自适应高度解决方法
喜欢 (2)