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>

 

发表评论

后才能评论