如何实现iframe自适应高度

好几次看到有人提问问到如何实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象,刚好我在工作中也碰到了类似问题,
于是上网翻查,东抄抄西看看,弄出来这么一个函数,贴到页面
里面就能用了。不敢独享,大家要是
觉得有用,欢迎使用

  源代码如下<code>

  <script type="text/javascript">

  //** iframe自动适应页面 **//

  //输入你希望根据页面高度自动调整高度的iframe的名称的列表

  //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。

  //定义iframe的ID

  var iframeids=["test"]

  //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏

  var iframehide="yes"

  function dyniframesize()

  {

  var dyniframe=new Array()

  for (i=0; i<iframeids.length; i++)

  {

  if (document.getElementById)

  {

  //自动调整iframe高度

  dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);

  if (dyniframe[i] &&!window.opera)

  {

  dyniframe[i].style.display="block"

  if (dyniframe[i].contentDocument &&dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape

  dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;

  else if (dyniframe[i].Document &&dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IE

  dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;

  }

  }

  //根据设定的参数来处理不支持iframe的浏览器的显示问题

  if ((document.all || document.getElementById) &&iframehide=="no")

  {

  var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])

  tempobj.style.display="block"

  }

  }

  }

  if (window.addEventListener)

  window.addEventListener("load", dyniframesize, false)

  else if (window.attachEvent)

  window.attachEvent("onload", dyniframesize)

  else

  window.onload=dyniframesize

  </script>

  </code>

  使用的时候只要贴在<head></head>里面就可以了

  iframe嵌入网页的用法?作者:自由勇?点击:MT-8000?最后更新 2003-10-12

  iframe并不是很常用的,在标准的网页中非常少用。但是有朋友经常问到,下面我简单地介绍一下它的用法,你只要熟练掌握这些参数足矣。

  <iframe>也应该是框架的一种形式,它与<frame>不同的是,iframe可以嵌在网页中的任意部分。我们举第一个例子,具体代码如:

  <iframe width=420 height=330 frameborder=0 scrolling=auto src=URL></iframe>,这里的URL可以是相对路径,也可以是绝对路径,效果如:

  width表示宽度,height表示宽度,可根据实际情况调整。

  scrolling表示是否显示页面滚动条,可选的参数为auto、yes、no,如果省略这个参数,则默认为auto。

  二、如何实现页面上的超链接指向这个嵌入的网页?

  只要给这个iframe命名就可以了。方法是<iframe name=**>,例如我命名为aa,写入这句HTML语言<iframe width=420 height=330 name=aa frameborder=0 src=http://www.liuyebo.com></iframe>,然后,网页上的超链接语句应该写为:<a href=URL target=aa>

  三、如果把frameborder设为1,效果就像文本框一样。

时间: 2025-01-03 07:50:59

如何实现iframe自适应高度的相关文章

关于IFRAME 自适应高度的研究

自适应 代码如下: <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta name="GENERATOR" content="Microsoft FrontPage 4.0"><meta name="ProgId" content=&qu

iframe 自适应高度方法

不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以"伸缩自如",所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大 家一种iframe动态调整高度的方法,主要是以下JS函数: 第一种方法:代码简单,兼容性还可以,大家可以先测试下. 复制代码代码如下: function SetWinHeight(obj)  {  var win=obj;  if (docum

iframe自适应高度解决方案详细教程

通过Google搜索iframe 自适应高度,结果5W多条,搜索iframe 高度自适应,结果2W多条. 我翻了前面的几十条,刨去大量的转载,有那么三五篇是原创的.而这几篇原创里面,基本上只谈到如何自适应静的东西,就是没有考虑到JS操作DOM之后,如何做动态同步的问题.另外,在兼容性方面,也研究的不彻底. 这篇文章,希望在这两个方面再做一些深入. 可能有人还没接触到这个问题过,先说明一下,什么是自适应高度吧.所谓iframe自适应高度,就是,基于界面美观和交互的考虑,隐藏了iframe的 bor

网页设计技巧:iframe自适应高度

可能有人还没接触到这个问题过,先说明一下,什么是自适应高度吧.所谓iframe自适应高度,就是,基于界面美观和交互的考虑,隐藏了iframe的border和scrollbar,让人看不出它是个iframe.如果iframe始终调用同一个固定高度的页面,我们直接写死iframe高度就可以了.而如果iframe要切换页面,或者被包含页面要做DOM动态操作,这时候,就需要程序去同步iframe高度和被包含页的实际高度了. 顺便说下,iframe在迫不得已的时候才去用,它会给前端开发带来太多的麻烦. 传

兼容主流浏览器的iframe自适应高度js脚本

 兼容主流浏览器的 iframe 自适应高度,很实用的,具体的js脚本如下,感兴趣的朋友可不要错过  兼容主流浏览器的 Iframe 自适应高度,js脚本如下:   代码如下: //iframe 高度自适应  function iframeAutoFit(iframeObj) {  setTimeout(function () {  if (!iframeObj) return;  iframeObj.height = (iframeObj.Document ? iframeObj.Docume

iframe自适应高度方法

 谓iframe自适应高度,就是,基于界面美观和交互的考虑,隐藏了iframe的border和scrollbar,让人看不出它是个iframe.如果iframe始终调用同一个固定高度的页面,我们直接写死iframe高度就可以了.而如果iframe要切换页面,或者被包含页面要做DOM动态操作,这时候,就需要程序去同步iframe高度和被包含页的实际高度了. 如果iframe的高度没有确定,那将是初始的高度. iframe是网页中的一部分,其大小还要受到网页的限制,设置最高可以使用height="1

使用jQuery不判断浏览器高度解决iframe自适应高度问题_jquery

这里介绍两个超级简单的方法,不用写什么判断浏览器高度.宽度啥的. 下面的两种方法自选其一就行了.一个是放在和iframe同页面的,一个是放在test.html页面的. 注意别放错了地方. iframe的代码中,注意要写ID,没有ID查找不到 复制代码 代码如下: <iframe src="test.html" id="main" width="700" height="300" frameborder="0&q

jquery ajax应用中iframe自适应高度问题解决方法_javascript技巧

iframe自适应高度本身是很简单的方法,就是在页面加载完成后,重新计算一下高度即可. 代码如下: 复制代码 代码如下: //公共方法:设置iframe的高度以保证全部显示数据//function SetPageHeight() {//    var iframe = getUrlParam('ifname');//    var myiframe = window.parent.document.getElementById(iframe);//     iframeLoaded(myifra

javascript控制iframe自适应高度例子

iframe有一个烦人的问题,就是在没有设置高度的情况下,被嵌套区会显示一大片空白,有时候设置了高度也不行,后来用JavaScript轻松解决了iframe自适应高度的问题,下面把经验和具体方法分享出来. 为了演示方便,这里需要2个页面,一个是被iframe的页,一个是母页面,先来看母页面,也就是有iframe代码的页面:  代码如下 复制代码 <html> <head> <title>iframe自适应加载的网页高度</title> </head&g

javascript原生和jquery库实现iframe自适应高度和宽度_jquery

javascript原生和jquery库实现iframe自适应内容高度和宽度---推荐使用jQuery的代码! ‍<iframe src="index.php" id="mainiframe" name="mainiframe" width="100%" frameborder="0" scrolling="no" marginwidth="0" marginh