jquery 控制iframe高度自适应
在做项目的过程中需要使用iframe,但是iframe默认有一个高度,超过该默认高度的会内容会被隐藏起来,而小于该默认高度的内容呢又会把默认高度当成内容的高度,在经过寻找答案的过程中,找到了怎样去控制iframe高度自适应
1,主窗口main.html
<html>
<head>
</head>
<body>
<iframe id='iframe' src='iframe.html' οnlοad="this.height=this.contentWindow.document.body.scrollHeight">
</iframe>
</body>
</html>
以上代码的意思是:在iframe子窗体中文档加载完了之后,自身iframe高度=文档高度,contentWindow指定可以在子窗体中获取文档内容
2,子窗体iframe.html
<html> <head> <link rel='stylesheet' type='text/css' href='../css/iframe.css'/> <!--iframe中html的样式文件--> <script src='../js/jquery-1.3.2.min.js' type='text/javascript'></script> <!--加载jquery--> </head> <body> </html>
<script type='text/javascript'> $(parent.document).find('iframe').height($(document).height()); //获取iframe子窗体的文档高度,并将此高度设置为父窗体中<iframe>元素的高度 </script>
这样就可以在iframe.html 中控制自身的高度了
以上代码是在做项目的过程中截取的部分代码,没有经过测试,但是大概思路就是这样