iframe自适应屏幕尺寸

文章目录[隐藏]

附上代码：

有时候网站往往要引用其他网站的页面，但是在不同的设备、浏览器显示就不太正常，例如手机和电脑尺寸就是不一样的，看起来就很蛋疼。

之前本站也是苦恼这个问题，但是最近就解决了。现在分享一下。
效果就是这样：

可以自己f12转换一下模拟环境，你会发现都能显示完整。

附上代码：

HTML标签结构：

<iframe style="min-height:600px;width:100%;height:100%;" src="引用的页面地址" id="iframe_auto" marginheight="0" marginwidth="0" scrolling="no"  frameborder="0"></iframe>

js代码：

<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('iframe_auto')
  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>

希望对各位有帮助吧！