当你在页面上使用了iframe之后,一般来说会不希望iframe显示难看的滚动条,以使iframe里面的内容和主页面的内容浑然一体。这时候你会设置scrolling="no"属性。但是这样一来如果iframe里面的内容是变化的,高度会随之内容的变化而变化的时候,你的iframe就会显得太长导致底下一大片空白,或者正好相反,由于iframe的高度太小导致一部分内容会被挡住。这里我提供一个兼容IE/NS/Firefox的javascript脚本实现动态调整iframe的高度。如果需要调整宽度的话,原理是一样的,本文不加详述。
首先,在你的主页面上必须包含以下这段javascript代码:
window.attachEvent("onload",function (){AutoSizeDIV('CODE_5404')})
<scriptlanguage="Javascript">
vargetFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
//extraheightinpxtoaddtoiframeinFireFox1.0+browsers
varFFextraHeight=getFFVersion>=0.1?16:0
functiondyniframesize(iframename){
varpTar=null;
if(document.getElementById){
pTar=document.getElementById(iframename);
}
else{
eval('pTar='+iframename+';');
}
if(pTar&&!window.opera){
//beginresizingiframe
pTar.style.display="block"
if(pTar.contentDocument&&pTar.contentDocument.body.offsetHeight){
//ns6syntax
pTar.height=pTar.contentDocument.body.offsetHeight+FFextraHeight;
}
elseif(pTar.Document&&pTar.Document.body.scrollHeight){
//ie5+syntax
pTar.height=pTar.Document.body.scrollHeight;
}
}
}
</script>
然后对于主页面用到iframe的地方添加代码:
window.attachEvent("onload",function (){AutoSizeDIV('CODE_3599')})
<iframeid="myTestFrameID"
onload="javascript:{dyniframesize('myTestFrameID');}"
marginwidth=0marginheight=0frameborder=0
scrolling=nosrc="/myiframesrc.php"
width=200height=100></iframe>
分享到:
相关推荐
javascript动态调整iframe高度
当你在页面上使用了iframe之后...这里我提供一个兼容IE/NS/Firefox的javascript脚本实现动态调整iframe的高度。如果需要调整宽度的话,原理是一样的,本文不加详述。 首先,在你的主页面上必须包含以下这段javascript代
用javascript动态调整iframe高度的代码
使用JavaScript监听iframe元素的load事件,然后根据iframe中document的高度来动态调整iframe窗口的高度。简单,可直接使用。
主要介绍了JavaScript实现iframe自动高度调整和不同主域名跨域,作者通过建立一个代理来同步高度调整,需要的朋友可以参考下
随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固定而显示出来的滚动条,不仅影响美观,还会对用 户操作带来不便。于是自动调整iframe的高度就成为本文的重点。 采用JavaScript...
在页面上使用iframe来动态加载页面内容是网页开发中比较常见的方法。在父页面中给定一个不带滚动条的iframe,然后对属性src指定一个可加载的页面,这样当父页面被访问的时候,子页面可以被自动加载。iframe的高度...
iframe调整大小 一个简单的实用程序,可将iframe调整为其内容的大小。 用法 $('iframe').iframeResize(); 这会将加载事件处理程序...iframeResize-min-height可用于为iframe设置默认高度,并在加载内容时自动将其删除。
自动调整 iframe 的大小以匹配其内容的高度并且根本没有滚动条。 演示 跨浏览器测试 自动调整大小的代码 var iframe = document.querySelector('iframe'); iframe.onload = function() { iframe.height = Math.max...
它提供了一系列功能来解决使用iFrame时最常见的问题,其中包括: 将iFrame调整为内容大小的高度和宽度。 适用于多个和嵌套的iFrame。 跨域iFrame的域身份验证。 提供多种页面大小计算方法,以支持复杂CSS布局。 ...
5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉...
它提供了一系列功能来解决使用iFrame时最常见的问题,其中包括: 将iFrame的高度和宽度调整为内容大小。 适用于多个和嵌套的iFrame。 跨域iFrame的域身份验证。 提供多种页面大小计算方法,以支持复杂CSS布局。 ...
5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉...
如果找到了此存储库,则可能已经发现了动态调整iframe大小以适合其内容的痛苦(当该内容来自其他来源时)。 幸运的是,您的搜索已结束! 尽管您确实需要能够将脚本添加到iframe中加载的目标页面。 轻松管理您的...
内部使用进行跨域通信,当需要调整页面高度或者关闭浮层时,向父页面发送消息,父页面中的Dialog组件接受到消息后进行处理。 Install $ spm install arale-dialog-iframe-helper --save API .close() 从iframe内部...
根据内容自动调整 iframe 的高度在 iframe 中添加这个脚本: FTVEN.iframeComIframe.autoresizeHeight();在父窗口中 iframe . myIframe { width : 300 px ; height : 400 px ; /* it's important to set an height *...