页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular VUE

推荐几款完美实现iframe高度自适应

布局 HTML我帮您 1月前  次浏览
 

iframe自适应内容大小


iframe自适应内容大小,支持跨域检测内容大小改变窗口大小,支持多个iframe嵌套,提供一系列的页面大小的计算方法来支持复杂的CSS布局, 检测到窗口大小调整可以使网页CSS动画和过渡调整大小事件, 提供自定义的大小和滚动的方法. iFrameResize( [{options}], [css selector] || [iframe] ); $('iframe').iFrameResize( [{options}] );


iframe响应式插件Pym.js(推荐)

Pym.js可以让你在嵌入ifram 的时候可自动的对iframe的大小进行调整以适应父一层容器,自适应式网站时,此插件很好帮助我们解决显示问题,并且可以避免跨域问题。 iframe响应式插件Pym.js(推荐)

支持浏览器: Internet Explorer 9, 10 , 11 Chrome 32 (Mac 10.9) Firefox 26 (Mac 10.9) Safari 7 (Mac 10.9) iOS 7 Safari iOS 7 Chrome Android 4.4 Chrome


其实iframe高度自适应自适应的原理差不多如下

iframe 嵌套界面自适应是一个比较常见的功能需求,使用原生的 JS 编写,适用于 chrome,firefox,IE 浏览器,原理差不多下面是代码部分。

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>

相关链接

发表评论