1 / 14
文档名称:

iframe自适应高度.docx

格式:docx   大小:24KB   页数:14页
下载后只包含 1 个 DOCX 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

iframe自适应高度.docx

上传人:kunpengchaoyue 2022/7/9 文件大小:24 KB

下载得到文件列表

iframe自适应高度.docx

相关文档

文档介绍

文档介绍:iframe高度自适应
1、目的
系统通过一内嵌页面(iframe)来展现网页内容(也包括内嵌页中再嵌一个网页),这将会引起如下几个问题:
不同的网页内容多少不一致,导致iframe的高度无法与实现内容或浏览器高度相匹配。
窗口缩放〈/td〉
〈/tr〉
〈/table〉
〈/body〉
</html
不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大家一种iframe动态调整高度的方法,主要是以下JS函数:第一种方法:代码简单,兼容性还可以,大家可以先测试下。
复制代码代码如下:
functionSetWinHeight(obj)
{
varwin=obj;
if()
{
if(win&&!)
{
if(&&)=;
elseif(&&)
=;
}
}
}
最后,加入iframe,不能丢掉onload属性,当然了,id也必须也函数中的win匹配
复制代码代码如下:<iframewidth="778"align="center"height="200"id="win"name="win"onload="Javascript:SetWinHeight(this)"frameborder="0"scrolling="no"src=""></iframe>
这么的这种也是跟上面的解决方法类似的代码
经典代码iFrame自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试。
HTML代码:
复制代码代码如下:
<iframesrc="http:///"id="iframepage"name="iframepage"frameBorder=0scrolling=nowidth="100%"
onLoad="iFrameHeight()"></iframe>Javascript代码:
<scripttype="text/javascript"language="javascript">
functioniFrameHeight(){
varifm=("iframepage");
varsubWeb=?["iframepage"].document:;
if(ifm!=null&&subWeb!=null){=;
}
}
</script>
下面这个兼容性更好一些
复制代码代码如下:
<scriptlanguage="javascript"type="text/javascript">
functiondyniframesize(down){
varpTar=null;
if(){
pTar=(down);
}
else{
eval('pTar='+down+';');
}
if(pTar&&!){
//beginresizingiframe
="block"
if(&&){//ns6syntax
=+20;
=+20;
}
elseif(&&){
//ie5+syntax