iframe高宽自适应以及滚动条隐藏方法

学习教程 2018-03-28 94次浏览 2个评论

高宽自适应

1)我自己用的方法:

 

html 代码:

<iframe src="left.html" id="myiframe" scrolling="no" onload="changeFrameHeight()" frameborder="0" ></iframe>

js 代码

function changeFrameHeight() {
    var ifm = document.getElementById("myiframe");
    ifm.height = document.documentElement.clientHeight;

}

window.onresize = function() {
    changeFrameHeight();

}

ps:获取 iframe 高度还可以用:
ifm.contentWindow.document.documentElement.scrollHeight+'px';

 

2)个人觉得比较好的方法:

 

详情参见:http://caibaojian.com/iframe-adjust-content-height.html

 

 

隐藏滚动条兼容 IE、Chorme 、Firefox

 

实现方法添加滚动条 css 即可:

html {
      /*隐藏滚动条,当 IE 下溢出,仍然可以滚动*/ 
     -ms-overflow-style:none; 
     /*火狐下隐藏滚动条*/ 
     overflow:-moz-scrollbars-none;
}

    /*Chrome 下隐藏滚动条,溢出可以透明滚动*/ 
    html::-webkit-scrollbar{
            width:0px
    }

 

喜欢 (18)