Iframe实现跨浏览器自适应高度解决方法
2023-06-13 09:15:45 时间
本文以实例形式讲述了Iframe实现跨浏览器自适应高度解决方法,非常具有实用价值。分享给大家供大家参考之用。具体方法如下:
该方法使用了jQuery,因此需要在iframe的src页面里面引入jQuery。
父页面里面相对简单一点,主要包含以下代码:
<iframeid="if1"scrolling="no"src="2.html"></iframe>
在iframe的src页面里面代码如下:
<scripttype="text/javascript"> functionresizeContent() { $(window.parent.document).find("#if1").height($("#content").height()); } functionshow400() { if($("#test400").css("display")=="none") { $("#test400").css("display",""); resizeContent(); } else { $("#test400").css("display","none"); resizeContent(); } } $(document).ready(function(){ resizeContent(); }) </script> <divid="left111"> <divclass="mnav"onclick="test400()"></div> <divclass="mnav"><ahref="ProductList.html">超级链接</a></div> <divclass="mnav"><ahref="ProductCategory.html">超级链接</a></div> <divclass="mnav"><ahref="ProductCategory.html">超级链接</a></div> <divid="test400"style="display:none;height:400px;"></div> <divclass="mnav"><ahref="Orders.html">超级链接</a></div> <divclass="mnavMcurrent"><ahref="Keywords.html">超级链接</a></div> <divclass="mnav"><ahref="#">超级链接</a></div> <divclass="mnav"><ahref="#">超级链接</a></div> <divclass="mnav"><ahref="#">超级链接</a></div> <divclass="mnav"><ahref="#">超级链接</a></div> <divclass="mnav"><ahref="#">超级链接</a></div> <divclass="mnav"><ahref="#">超级链接</a></div> <br/> </div>
注释:
这里面的
$(window.parent.document).find("#if1").height($("#content").height());
这句话最初是:
$(window.parent.document).find("#if1").height($(document).height());
可以实现自适应高度,但是不能实现缩放自适应。因为document的高度是展示内容出现过的最高高度,所以这里如果点击展开,iframe不会缩小,只会展示最高出现过的高度。
所以这里要用一个父层容器,也就是最新的代码。这样就可以实现自适应了。
相信本文所述对大家的jQuery程序设计有一定的借鉴价值。
相关文章
- 电脑蓝屏报错0x00000006怎么办?蓝屏报错0x00000006解决方法
- 一篇文章带你揭 秘现代浏览器原理与方法_浏览器发送请求原理
- 在Chrome浏览器中最快速实现拾色器(颜色吸管)的方法
- java中数组的输出方法_java将一个数组逆序输出
- windows10 更新Ubuntu20.04 LTS的方法步骤
- html5 点击播放video的方法详解编程语言
- Linux下执行Python程序的方法(linux执行py文件)
- 的用法Oracle中临时表的使用方法(oracle临时表)
- Redis序列化:提高数据存储效率的一种方法。(redis序列化)
- 轻松掌握:Linux中查看已使用过的命令的方法(linux查看用过的命令)
- asp在IE浏览器中下载服务端上的各类文件的实现方法
- javascript常用方法、属性集合及NodeList和HTMLCollection的浏览器差异
- 关于MYSQL远程登录的授权方法命令
- javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
- 解决火狐浏览器下JSsetTimeout函数不兼容失效不执行的方法
- 图片img的src不变让浏览器重新加载实现方法
- 让低版本浏览器支持input的placeholder属性(js方法)
- 在PHP中设置、使用、删除Cookie的解决方法
- 捕获浏览器关闭、刷新事件不同情况下的处理方法
- FF浏览器和IE下载文件乱码问题的解决方法
- Css浏览器兼容的解决方法
- 各浏览器对document.getElementById等方法的实现差异解析
- 使用js检测浏览器是否支持html5中的video标签的方法
- 多种方法实现360浏览器下禁止自动填写用户名密码
- 两种方法基于jQuery实现IE浏览器兼容placeholder效果
- JS判断浏览器是否支持某一个CSS3属性的方法
- IIS7配置ASP详细错误信息发送到浏览器显示的方法
- Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法