自动调整框架iframe的高度

最新推荐文章于 2023-04-12 10:09:10 发布
最新推荐文章于 2023-04-12 10:09:10 发布
阅读量736 收藏
点赞数
分类专栏： Web Tech 文章标签： iframe 框架 浏览器 function null ie

原帖：http://blog.csdn.net/gxf212/archive/2007/01/10/1478724.aspx

为了方便查找，索性转帖：

 

<script type="text/javascript">
 //** iframe 自动适应页面 **//

 //输入你希望根据页面高度自动调整高度 的iframe 的名称的列表
 //用逗号把每 个iframe 的 ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。

 //定义iframe 的ID
 var iframeids=["f1"]

 //如果用户的浏览器不支持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.οnlοad=dyniframesize
</script>

#将此段代码放到<head>中即可运行

 

有时为了方便使用Iframe ，但被潜入的页面长度不是固定的，显示滚动条不仅影响美观还对用户操作带来不便， 自动调整高度 可以解决这个问题。^_^

<SCRIPT LANGUAGE="JavaScript">

function f_frameStyleResize(targObj){

 var targWin = targObj.parent.document.all[targObj.name];

 if(targWin != null) {

  var HeightValue = targObj.document.body.scrollHeight

  if(HeightValue < 600){HeightValue = 600} // 不小于600

  targWin.style.pixelHeight = HeightValue;

 }

}

function f_iframeResize(){

 bLoadComplete = true; f_frameStyleResize(self);

}

var bLoadComplete = false;

window.onload = f_iframeResize;

</SCRIPT>

注意：iframe 必须要有name属性，否则无效。

wavefly_liu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iframe高度自适应解决方式
lavendersue的博客
11-26 1447
带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能，可是 iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给iframe设置高度的时候多了也不好，少了更是不行，现在，让我来告诉大 家几种iframe动态调整高度的方法。 1、 <iframe width="778" align="center" height="200" id=...
Iframe框架自动适应高度示例详解
csb5201314的专栏
12-30 822
<br /> iframe框架可以动态加载网页，并能嵌入到当前页面中，实现页面嵌套的功能。前几天做一个网页功能时需要用到自动调整Iframe框架的大小，找了资料才找到了答案。下面先来看下实现的代码：<br />【实现代码】 <br />        在这里有两个页面，第一个页面是iframe.html，iframe框架就在这个页面里，实现代码如下所示： <br /> <br />         <br />第二个页面是autoframe.html，它会自动调整子页的大小，实现代码如下所示(代码放在子页，
根据内容自动调整iframe框架高度
zgqtxwd的专栏
05-01 355
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
iframe自适应高度
zhu_menglu的博客
04-12 4791
其中，padding-bottom的值需要根据iframe的宽高比来计算，例如，如果iframe的宽高比为16:9，则padding-bottom的值为56.25%（9除以16乘以100%）。可以设置iframe标签的高度为0，然后使用padding-bottom属性来设置iframe标签的高度，使其按照原来的比例自适应。这样，当浏览器窗口大小改变时，iframe标签的高度会自动按照原来的比例进行调整，从而实现自适应效果。
Iframe框架高度自适应的实现
我、已开始练习。。。
03-13 591
（一）Iframe框架高度自适应的实现 Iframe框架高度自适应的实现,一个很牛的团队写的，简单的说就是在A.html中iframe引用B.htm(高度是不断变化的)并且自适应高度.网上也有很多方法，但是有些不全兼容ie6,ie7,ff,opera,在此贴下兼容ie6,ie7,ff,opera下的高度自适应的代码,并且已经封装好，只需要在被引用的页面加入这段代码 ”text/javasc
自动调整iframe框架的方法
风雨无阻，执着追求!!!
07-17 555
//自动调整iframe框架的方法 function iframeAuto() { try { if(window!=parent) { //定位需要调整的frame框架（在父级窗口中查找） var a = parent.document.getElementsByTagName
Iframe框架自动调节高度
ZH592677127的专栏
07-26 4360
做网站的时候，总会用到框架，frame或者iframe，当我们在某个iframe中加载网页时，经常遇到网页高度动态变化的问题，如果不调整iframe的高度，框架就会出现滚动条或是内容显示不完整，让人很不爽。在网上找了一下资料，最后通过javascript实现了iframe高度的动态调整。下面是本例iframe的框架结构：分成top、middle和foot三部分。 下面是ASP.NET页面中的
iframe自动根据内容调整大小
盐一酱的专栏
12-21 6507
出处：http://blog.163.com/xx_jun_/blog/static/20827520920125169374412 最近做网页开发，用到了iframe，其实以前也用这个，不过由于它不能自动根据内容调整大小，所以用的很少，也就没有仔细研究，可是最近做网页开发其中几个页面必须要用到iframe才能很容易的进行一些操作，不得以就研究了一下，如何让其自动根据内容来设定自身的大小
用样式自动调整iframe框架页高度
woshiqq的专栏
09-29 442
 利用样式表的功能就能轻易实现function autoResize(){try{ document.all["test"].style.height=test.document.body.scrollHeight}catch(e){}}
js实现iframe自动自适应高度的方法
10-24
console.error("无法调整Iframe高度，可能因跨域限制", e); } } ``` 这个函数通过`window.frameElement`获取当前运行脚本的Iframe元素，然后设置它的`height`属性为`document.body.scrollHeight`，即文档内容的...
JavaScript自动设置IFrame高度的小例子
10-27
通过上述分析，我们可以看到IFrame高度自动调整的实现不仅涉及对JavaScript基本功能的理解，还涉及对浏览器兼容性问题的处理。在开发自己的代码时，推荐使用更为现代的替代方案（如使用CSS的flexbox布局），以确保更...
框架页面高度自动刷新的Javascript脚本
10-26
标题中的“框架页面高度自动刷新”指的是当加载`index.htm`时，脚本会每秒自动检测并调整框架页面(`ifr_obj`)的高度，以适应其内容的动态变化。这种机制可以确保无论内容如何更新，框架页面都能自适应地显示全部内容...
Iframe框架自动适应高度示例详解.pdf
09-30
在一些特殊情况下，我们需要让Iframe高度自动适应其中内容的大小。上面提供的文档内容，尽管通过OCR扫描技术出现了一些识别错误，但是核心的代码和思路是清晰的，能够帮助我们理解如何实现Iframe高度的自适应。 从...
Iframe 自动适应页面的高度示例代码
09-04
`onload`属性绑定了`SetCwinHeight(this)`，这样当Iframe中的内容加载完毕时，会自动调用这个函数来调整高度。`width`属性设定了宽度，`border`和`frameborder`属性设为0，以消除边框。 总结来说，这个示例展示了...
顶尖电子称条码秤LS系列称固件，最新固件，固件
最新发布
08-28
顶尖电子称条码秤LS系列称固件，最新固件，固件
爬取淘宝热销(热门)咖啡商品信息数据集
08-28
本资源旨在收集淘宝平台上热销咖啡商品的相关信息，包括但不限于：店铺所在省份、城市位置、商品名称、销售价格、销量数据、单价（以人民币计）、付款人数、是否提供包邮服务、是否来自天猫平台以及满减优惠的详细信息。这些信息均来源于淘宝平台的公开透明数据，可供学习参考之用。请注意，本资源仅用于学术研究和个人学习目的，不得用于商业用途或其他非法活动。
爬取的淘宝新品推荐男装商品信息公开透明数据集
08-28
本资源专注于收集淘宝平台最新推荐的男装商品信息，内容涵盖商品的店铺所在省份、城市位置、商品的名称、销售价格、累积销量、单价（以人民币计价）、付款的顾客人数、是否提供包邮服务、是否为天猫平台的商品，以及相关的满减优惠情况。这些详细的数据点均来源于淘宝平台的公开透明信息，经过精确抓取和整理，旨在为分析电商平台上的新品推荐策略和消费者购买行为提供实用数据。 这些数据严格遵循淘宝平台的公开政策和隐私保护原则获取，确保了信息的合法性与合规性。然而，本资源仅作为学习参考之用，意在帮助研究人员、市场分析师或学生等理解电商领域的商品推荐机制、销售动态及市场趋势。 任何将此数据用于商业目的或其他未授权的活动都是不恰当的，甚至可能触犯相关法律条款。 在使用这些数据进行学术研究或个人学习时，用户应自觉遵守相关法律法规，尊重数据来源和版权，正确引用数据源，并不得用于任何形式的商业盈利。
STM32F4的环境配置，可直接运行STM32F4系列的芯片
08-28
STM32F4的环境配置，可直接运行STM32F4系列的芯片
iframe高度为什么只增不减
04-11
iframe的高度只增不减是因为iframe是一个内嵌网页框架，它的高度是由内部内容的高度决定的。当内部内容的高度增加时，iframe会自动适应内容的高度，但是当内部内容的高度减少时，iframe并不会自动缩小高度。 这是因为iframe的高度是由内部网页的内容决定的，而浏览器无法直接获取内部网页的高度。所以当内部网页的内容发生变化时，浏览器无法感知到这种变化，导致iframe的高度无法自动缩小。 如果需要实现iframe高度的自适应，可以通过以下方法解决： 1. 使用JavaScript来获取内部网页的高度，并手动设置iframe的高度。可以通过监听内部网页内容的变化事件，然后动态调整iframe的高度。 2. 使用postMessage方法进行跨域通信，内部网页可以向父页面发送消息，包括内容的高度信息，然后父页面再根据接收到的消息来设置iframe的高度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值