html5高度代码,简洁JS代码:自适应高度的iframe框架

在网页开发中,当使用iframe嵌入页面时,可能会遇到滚动条影响页面美观的问题。这篇博客探讨了如何利用JavaScript兼容IE和Firefox,动态获取iframe内容高度并设置iframe的高度,以确保没有滚动条出现。主要涉及的技术包括JavaScript、DOM操作和浏览器兼容性处理。
摘要由CSDN通过智能技术生成

有时在项目中会遇到通过在页面中采用iframe的方式include其它页面,这时就会考虑不要因出现滚动条而影响页面效果,但include页面的内容高度是未知的,所以大家都会利用javascript来解决这个问题。

在网上曾看见过解决此问题的代码,不过拷贝到本地进入调试时有些不正常,在IE下无法正确获得嵌套页面的高度,通过各种尝试,最终代码如下(兼容IE和Firefox):

function SetCwinHeight(iframeObj){

if (document.getElementById){

if (iframeObj && !window.opera){

if (iframeObj.contentDocument && iframeObj.contentDocument.body.offsetHeight){

iframeObj.height = iframeObj.contentDocument.body.offsetHeight;

}else if(document.frames[iframeObj.name].document && document.frames[iframeObj.name].document.body.scrollHeight){

iframeObj.height = document.frames[iframeObj.name].document.body.scrollHeight;

}

}

}

}

在一个页面含有某个iframe,其id=”myframe” name=”myframe”,此时使用document.getElementById(“myframe”)取到的是iframe标签对象,通过该对象可以获取iframe的各个属性,例如src、frameborder、style等等,但是不能获取到iframe所包含的子页面的各个对象。如果使用document.frames(“myframe”)取到的是iframe组件对象,通过该对象可以获取到iframe所包含的页面的子页面的各个对象,例如子页面的window对象,但是不能获得iframe标签得各个属性,例如上面说到的src等等。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值