iframe外链嵌套框架界面响应式高宽度代码

iframe外链嵌套框架界面响应式高宽度代码 HTML/PHP 第1张

iframe嵌套界面自适应是一个比较常见的功能需求，但是目前网上搜索出来的均不自适应功能，下面是我列出来的解决方案，分享给大家。

第一种使用原生的JS编写

适用于chrome,firefox,IE浏览器，下面是代码部分。

<div class="main_page">
	 <iframe scrolling="no" id="main" name="main" frameborder="0"  src="#" style="min-height:600px;width:100%;height:100%;"></iframe>
</div>
<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>

第二种纯HTML-iframe高度宽度自适应

<body id="body" height="100%">
<script type="text/javascript">
    //设置body高度为浏览器高度，当然也可以不设置   
    document.getElementsByTagName('body')[0].style.height = window.innerHeight+'px';
</script>
    <!--iframe的高度设置为父元素的高度即可实现高度自适应-->
    <!--这边以body为父元素，当然也可以以div之类的元素为父元素-->
    <iframe name="Info1" id="Info1" src="#" onload="this.height=body.offsetHeight" width="100%" scrolling="true" frameborder="0"></iframe>
</body>

第三种嵌入iframe框架自适应宽度代码

让插入的iframe框架代码自适应浏览器的宽度

<iframe id="frame_content" src="#" scrolling="no" frameborder="0" onload="this.height=500" width="100%" height="100%" name="dibu"></iframe>

第四种播放器适用的近乎完美版

几乎完美的自适应代码，纯css，支持16:9,4:3.（推荐使用）

<style type="text/css">
.video-container { display: block; position: relative; width: 100%; height: 0; overflow: hidden; box-sizing: border-box } .video-container iframe, .video-container video { position: absolute; top: 0; left: 0; border: none; width: 100%; height: 100% } .video-ratio-16by9 { padding-bottom: 56.25% /* 9/16 */ } .video-ratio-4by3 { padding-bottom: 75% /* 3/4 */ }
</style>
<div class="video-container video-ratio-16by9">
<iframe src="#" allowfullscreen="" mozallowfullscreen="" msallowfullscreen="" oallowfullscreen="" webkitallowfullscreen="" frameborder="0"></iframe>
</div>

特别声明：本站大部分资源来源于网络，如若本站内容有侵犯了原著者的合法权益，请联系邮箱"admin@liitk.com"提供证明并给予删除处理！

iframe嵌套界面代码