获取到 Iframe 框架的实际高度，去掉 Iframe 中的滚动条

最新推荐文章于 2024-07-04 10:35:44 发布

行驶

最新推荐文章于 2024-07-04 10:35:44 发布

阅读量7.8k

点赞数 2

分类专栏： java基础 html JSP/SERVLET 文章标签： IFrame

本文链接：https://blog.csdn.net/xingshi89/article/details/42426785

版权

java基础同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

JSP/SERVLET

5 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

-----------------------------------------------

PS：最近发现以下写的方法在某些特定的环境中，因为加载顺序，或者隐藏等等的原因，不能达到预期的效果，所以，再次我强烈建议，以后尽量少的使用 iframe , 使用div即可，然后在使用 jquery 的 load(url) 方法，就非常好用，不用考虑滚动条的问题！！！

----------------------------------------------

在介绍中，本文使用了 Jquery ，并且注意，父页面和子页面中都含有 DOCTYPE

在父页面中获取 iframe 内容的实际高度

var h = $("#test_frame").get(0).contentWindow.document.body.scrollHeight;

在父页面中更改 Iframe 的高度，使 Iframe 没有滚动条

$("#test_frame").attr("height",h+100);

例子：

父页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script src="jquery-1.2.6.js" type="text/javascript" ></script>
<script>
function test(){
//获取到 iframe 的高度：
//alert("parent:"+$("#test_frame").get(0).contentWindow.document.body.scrollHeight);
//赋值高度
var h = $("#test_frame").get(0).contentWindow.document.body.scrollHeight;
$("#test_frame").attr("height",h+100)
}
</script>
<body style="text-align:center">
这是父页面 
<iframe id="test_frame" src="test25.html" frameborder="1" scrolling="no" ></iframe>
<input type="button" value="测试" οnclick="test()" />
</body>
</html>

子页面：test25.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body style="overflow:hidden">
this is a test
 
 
 
 
 
aaa
</body>
</html>
<script>
//在页面中获取本页面的实际高度
alert(window.document.body.clientHeight);
</script>

行驶

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
获取到 Iframe 框架的实际高度，去掉 Iframe 中的滚动条

在介绍中，本文使用了 Jquery ，并且注意，父页面和子页面中都含有 DOCTYPE 在父页面中获取 iframe 内容的实际高度var h = $("#test_frame").get(0).contentWindow.document.body.scrollHeight;在父页面中更改 Iframe 的高度，使 Iframe 没有滚动条$("#test_frame")
复制链接

扫一扫

专栏目录