JavaScript-关于<iframe> 标签自适应宽高的问题

小组事务管理 小组事务管理 主题:974 回复:1955

JavaScript-关于<iframe> 标签自适应宽高的问题

瑾兮 发布于 2017-07-12 字数 195 浏览 1261 回复 3

一般我们用iframe做弹出层的时候,都是先设定好iframe的宽高,然后点击后再显示的,但现在我想先获取iframe要加载的网页里面的宽高,然后在动态改变iframe的宽高进行显示,请问这样能否实现?如何实现?

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(3

泛泛之交 2017-08-30 3 楼

之前曾经 问过iframe高度自适应的问题,但是没有得到满意答案,后来问了身边的牛人,使用下面的代码解决,希望可以解决你的问题:

<script type="text/javascript"> 
function reinitIframe(){ 
var iframe = document.getElementById("mainFrame"); 
try{ 
var bHeight = iframe.contentWindow.document.body.scrollHeight; 
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; 
var height = Math.max(bHeight, dHeight); 
iframe.height = height; 
}catch (ex){} 
} 
window.setInterval("reinitIframe()", 200); 
</script>

更多方法参考这里:http://www.jb51.net/article/15780.htm

泛泛之交 2017-08-25 2 楼

试试用jquery来实现:

<iframe src="a.html" scrolling="no"></iframe>
<script type="text/javascript">
var getHeight = $("iframe").contents().height();
$("iframe").height(getHeight);
</script>

瑾兮 2017-08-19 1 楼

比较简单的传统处理方式:

<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>
可以参考这样有别的方式http://justcoding.iteye.com/blog/593559