iframe样式修改

最新推荐文章于 2024-09-11 21:57:53 发布

HarryHY

最新推荐文章于 2024-09-11 21:57:53 发布

阅读量1.4k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/HarryHY/article/details/103505274

版权

JS 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

    <iframe
      src="https://www.baidu.com/"
      scrolling="no"
      name="main"
      frameborder="0"
      id="main"
      style="min-height:3584px;width:100%;height:100%;"
    ></iframe>

<script>
// 计算页面的实际高度，iframe自适应会用到
function calcPageHeight(doc) {
  var cHeight = Math.max(
    doc.body.clientHeight,
    doc.documentElement.clientHeight
  );
  var sHeight = Math.max(
    doc.body.scrollHeight,
    doc.documentElement.scrollHeight
  );
  var height = Math.max(cHeight, sHeight);
  return height;
}
//根据ID获取iframe对象
var ifr = document.getElementById("main");
ifr.onload = function() {
  //解决打开高度太高的页面后再打开高度较小页面滚动条不收缩
  ifr.style.height = "0px";
  var iDoc = ifr.contentDocument || ifr.document;
  var height = calcPageHeight(iDoc);
  if (height < 850) {
    height = 850;
  }
  ifr.style.height = height + "px";
};
</script>
<script>