• 如果您觉得本站还有点用,那么赶紧使用Ctrl+D 收藏吧
  • 热烈庆祝图库功能上线,具体请看站长公告
  • api接口慢慢研发中,具体请看发布页:接口发布页

iframe自适应屏幕尺寸

源码分享 窝主 4个月前 (06-02) 157次浏览 已收录 1个评论 二维码
文章目录[隐藏]

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

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

可以自己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>

希望对各位有帮助吧! :smile:


二次元圈子, 版权所有
转载请注明原文链接:iframe自适应屏幕尺寸
喜欢 (0)
[扫一扫投喂本站]
分享本页面
窝主
关于作者:
作者简介:咕咕咕

您必须 登录 才能发表评论!

(1)个小伙伴在吐槽
  1. 签到成功!荷尔蒙决定一见钟情,多巴胺决定天长地久。_____TIME:2020-06-02 21:44:33
    窝主2020-06-02 21:44 Windows 10 | Chrome 81.0.4044.129
正在获取,请稍候...
00:00/00:00

播放器
换装