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

时间:2021-04-03 09:13:48

  对于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即可;希望对大家有所帮助。