iframe高度自适应,取消滚动条
项目中碰到左侧是一个列表,是固定定位,点击不同的列表选项右侧引入不同的iframe地址文件,但是iframe设置属性的时候高度只识别px,设置百分百之类的都无效,并且不想要iframe本身的滚动条,页面只需要一个默认的滚动条。实现效果如下图:
html代码:
<iframe src="yuanchengkaipiao.html" id="dizhi"></iframe>
css代码:
#dizhi{
width: 100%;
border: 0;
overflow: hidden;
}
js代码:
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
};
window.onload = function () {
setIframeHeight(document.getElementById('dizhi'));
};
注意要将函数调用放到window.onload中才会生效。