去掉iframe默认滚动条后影响正常滚动以及js解决高度自适应。

Posted 2020-09-18

　　对于iframe，相信大家都是知道存在很多弊端，比如说不利于搜索引擎的抓取；产生冗余结构体系不易管理等。不过在漫长的开发路上有时候使用是不可避免的。

　　前两天在做一个退弹的功能的时候使用了iframe，由于我设置的滚动条属性是：scrolling="auto"，首先出现的问题是右侧有两个滚动条，不难想到一个是父级页面的，另一个就是iframe自带的。好在iframe去掉自身滚动条还比较方便，设置了scrolling="no"后就消失了，我以为问题就解决了，然而，我发现滚动不了了，没办法滚动浏览页面靠后的信息。为此，查了相关资料，便用JS的办法解决了这个问题：　

//iframe：

<iframe src="backtop.html" frameborder="0" scrolling="no" id="defaultID" onload="setIframeHeight(this)"></iframe>

//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(‘defaultID‘));
};

在这里，只需将对应ID换成自己提供的ID即可；希望对大家有所帮助。