信息发布→ 登录 注册 退出

JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)

发布时间:2026-01-11

点击量:
复制代码 代码如下:
function adjustIFramesHeightOnLoad(iframe) {
var iframeHeight = Math.min(iframe.contentWindow.window.document.documentElement.scrollHeight, iframe.contentWindow.window.document.body.scrollHeight);
$(iframe).height(iframeHeight);
}

失败的测试就不说了,来直接的。
两个链接和iframe:
复制代码 代码如下:
<li><a href="selfinfo.jsp" target="c-c-iframe" title="个人信息" >个人信息</a></li>
<li><a href="modifypass.jsp" target="c-c-iframe" title="修改密码" >修改密码</a></li>
<iframe src="init.jsp" id="c-c-iframe" name="c-c-iframe" width="500px;" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>

js代码:
复制代码 代码如下:
<script type="text/javascript">
<!--
$(function(){
$("#c-c-iframe").load(function(){
$(this).height($(this).contents().find("#content").height() + 40);
});
});
-->
</script>

这里的find("#content")是找出iframe内容文档中的id为content的高度(另外比如find("body")),并设置给iframe,
类似的还可以设置宽度,留给需要的朋友尝试吧。
这样就解决了iframe不会因为内容过大被挡住的问题(因为我设置了scrolling="no")。
PS:基本上我会优先考虑使用iframe来实现无刷新,兼容浏览器的后退按钮;而且使用iframe加载flash是很爽的,不用写什么js调用,object标签,还符合W3C标准。
2008年11月28日17:13:31 ,今天使用过程中根据实际情况进行了一下改良,代码如下:
复制代码 代码如下:
<script type="text/javascript">
<!--
$(function(){
$("#workArea").load(function(){
var height = $(this).contents().find("#box").height() + 40;
//这样给以一个最小高度
$(this).height( height < 400 ? 400 : height );
});
});
-->
</script>

另发现使用find("body")不太好使,高度不准确。
标签:# 来实现  # Chrome扩展页面动态绑定JS事件提示错误  # Chrome开发者工具9个调试技巧详解  # 个人信息  # 修改密码  # 我会  # 还可以  # 不太  # 就不  # 说了  # 实际情况  # 过大  # javascript判断chrome浏览器的方法  # 进行了  # 不准确  # 过程中  # 很爽  # 加载  # 解决了  # 文档  # 因为我  # href  # selfinfo  # ff的设为首页、加入收藏及保存到桌面js代码  # 自适应  # IFrame  # js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本  # 使用Chrome调试JavaScript的断点设置和调试技巧  # JavaScript无提示关闭窗口(兼容IE/Firefox/Chrome)  # 解决javascript:window.close()在chrome  # Firefox下失效的问题  # 如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”  # 完美兼容IE  # chrome  # JQuery  # jQuery一步一步实现跨浏览器的可编辑表格  # 支持IE、Firefox、Safari、Chrome、Opera  # 兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码  # jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)  # chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式  # js chrome浏览器判断代码  # json格式化/压缩工具 Chrome插件扩展版  # 解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题  # JavaScript获取鼠标坐标的函数(兼容IE、FireFox、Chrome)  # 禁止选中文字兼容IE、Chrome、FF等  
在线客服
服务热线

服务热线

4008888355

微信咨询
二维码
返回顶部
×二维码

截屏,微信识别二维码

打开微信

微信号已复制,请打开微信添加咨询详情!