javascript实现框架高度随内容改变的方法
更新时间：2015年07月23日 15:10:28 作者：李荣飞
这篇文章主要介绍了javascript实现框架高度随内容改变的方法,实例分析了通过父页面及内容改变框架高度两种实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了javascript实现框架高度随内容改变的方法。分享给大家供大家参考。具体如下：
有两种方法：
一、就是通过父页面改变
这里要理解框架的两个属性 contentWindow 和contentDocument 两个属性的意思和window document意思差不多，不同的是contentWindow 所有浏览器都支持，contentDocument ie6,7不支持，chrome 也不支持
<iframe onload="change_height()"></iframe>
function change_height(){
var iframe=document.getElementById("iframe_id");
//取得框架元素
var i_height=iframe.contentWindow.document.body.scrollHeight||iframe.contentWindow.document.documentElement.scrollHeight;
//取得框架内容的高度
iframe.height=i_height;
//改变
}
二、就是通过内容改变
在内容页进行
window.onload=function(){
var iframe=parent.document.getElementById("iframe_id");
//取得框架元素
iframe.height=document.body.scrollHeight||document.documentElement.scrollHeight;
//取得框架内容的高度并改变
}
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要为大家详细介绍了js实现简单的打印表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
这篇文章主要介绍了用Webpack构建Vue项目的实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了javascript如何读写本地sqlite数据库问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要为大家详细介绍了JavaScript实现动态留言板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
本篇文章主要是对javascript中的self和this用法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
拓展了几个常用的方法,需要的朋友可以参考下2013-07-07
在开发移动应用程序时,我们经常需要处理用户交互事件,然而,有时候这些事件会冒泡,导致意外的行为和不良用户体验,在本文中,我们将探讨如何使用UniApp框架来阻止事件冒泡,并提供一些示例代码来帮助您理解如何实现这一功能,需要的朋友可以参考下2023-11-11
我不知道是否有什么标准规定不允许修改id属性，或者不建议修改id属性，总之IE对此支持不佳。2008-09-09
这篇文章主要给大家介绍了关于Echart折线图手柄触发事件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
最新评论