`
menjoy
  • 浏览: 422260 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

iframe自动调整高度

阅读更多

<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++)<br="">  {
   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>

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

 

 

分享到:
评论

相关推荐

    iFrame 自动调整高度

    ### iFrame自动调整高度知识点详解 #### 一、前言 在网页开发中,经常会遇到需要将一个网页嵌入到另一个网页中的场景,这时候就会用到`&lt;iframe&gt;`标签。然而,由于`&lt;iframe&gt;`的高度默认是固定的,在内容发生变化时...

    自动改变iframe的高度

    因此,让`iframe`能够自动调整高度变得尤为重要。 #### 三、解决方案 接下来,我们将介绍一种简单有效的方法来实现`iframe`自动改变高度。该方法适用于现代浏览器,包括Chrome、Firefox、Safari等。 **核心代码...

    iframe自动适应高度(完美自适应高度嵌套代码),兼容目前主流浏览器。

    标题提到的“iframe自动适应高度(完美自适应高度嵌套代码)”提供了一个解决方案,它能够确保`iframe`在各种主流浏览器中都能正确地自适应内容高度,包括360浏览器、IE6-9、遨游、火狐以及搜狗浏览器。 在传统的`...

    Iframe自动调节高度问题,附上网站模版

    以前,我在做网站的时候,碰到...我使用Iframe的时候,如果我某个页面高于Iframe的时候,就会显示滚动条.但我又不想把有些固定的东西每个页面都写.请教了前辈之后,问题终于可以解决了,于是写了个例子,供有需要的人参考!

    iframe 跨域 自动适应高度

    2. **iframe自动适应高度** 当`iframe`加载的页面高度不确定时,我们需要动态调整`iframe`的高度以适应内容。由于跨域限制,我们不能直接获取子页面的DOM信息,但可以通过以下策略实现: - **使用代理页面** ...

    iframe自动适应高度

    当`iframe`中的内容高度不确定时,我们希望`iframe`能自动调整其高度以完全显示内部内容,避免出现滚动条或者内容被截断的情况。以下是一些实现`iframe`高度自适应的方法: 1. **JavaScript解决方案**: - **...

    iframe内容高度 iframe自适应高度终极解决Iframe设置高度后无法缩小问题

    然而,`&lt;iframe&gt;`的高度自适应问题常常困扰着开发者,尤其是当`&lt;iframe&gt;`内部的内容动态加载或者变化时,如何让`&lt;iframe&gt;`自动调整其高度以适应内容,而不会导致滚动条溢出或内容被截断,成为了一个常见需求。...

    自动调节iframe高度,而不显示其滚动条 js

    ### 自动调节iframe高度,而不显示其滚动条 js #### 背景介绍 在网页开发过程中,经常会遇到需要在一个页面内嵌入另一个页面的情况,这时通常会使用HTML中的`iframe`元素来实现。然而,当嵌入的内容高度不确定或者...

    iframe高度自适应.pdf

    在默认情况下,`iframe`的高度是固定的,这意味着当嵌入的内容高度发生变化时,`iframe`不会自动调整其高度。这可能会导致内容溢出或出现滚动条的情况,从而影响用户体验。因此,实现`iframe`的高度自适应变得尤为...

    js实现iframe自适应高度

    然而,这些静态属性无法自动调整以适应内容的变化。 接下来,我们可以利用JavaScript的DOM操作和事件监听来实现自适应高度的功能。以下是一个基本的实现步骤: 1. **获取`iframe`元素**:通过`document....

    JAVASCRIPT让IFRAME框架的高度自适应

    我们可以定义一个函数来获取子IFRAME框架的高度,然后将其设置为table元素的高度,以便子IFRAME框架的高度能够正确地自动调整。 通过使用JavaScript来让IFRAME框架的高度自适应,我们可以实现IFRAME框架的高度自动...

    iframe自适应高度

    `iframe`内容页面发送其高度给父页面,然后父页面调整`iframe`的高度。 ```javascript // 父页面 window.addEventListener('message', function(event) { if (event.origin !== 'http://example.com') return; // ...

    嵌入到HTML的iframe自动适应大小

    自动调整iframe高度的核心在于监听页面加载完成事件,然后通过JavaScript读取iframe内部内容的高度,并将其设置为iframe本身的高度。这一过程通常需要针对不同浏览器进行适配,因为iframe在不同的浏览器中可能采用...

    iframe跨域自适应高度模板

    为了使`iframe`根据其内容自动调整高度,可以使用JavaScript进行动态计算。一种常见的方法是在父页面中监听`iframe`的`load`事件,然后通过`contentWindow`属性获取到`iframe`内部的`window`对象,并通过`document`...

    iframe自适应高度和宽度

    然而,在使用`iframe`时,如何使其高度和宽度能够根据内容自动调整,是开发者们经常遇到的问题之一。 #### 一、基本概念 在默认情况下,`iframe`的高度和宽度是固定的,需要开发者手动设置。当嵌入的内容发生变化...

    iframe高度随子页高度变化

    当我们需要在`iframe`中展示的内容高度不固定时,一个常见的需求就是使`iframe`的高度能自动适应其内嵌页面的高度,以避免滚动条的出现或内容被截断。标题"iframe高度随子页高度变化"和描述中提到的问题,正是关注于...

    Iframe 高度自适应,js控制Iframe 高度自适应.docx

    Iframe 高度自适应是指在网页中嵌入的 iframe 元素能够根据其内容自动调整高度,以适应不同的浏览器和屏幕尺寸。js 控制 Iframe 高度自适应是指使用 JavaScript 语言来控制 iframe 的高度,使其能够自动调整以适应...

    Iframe 高度自适应浏览器高度

    标题“Iframe 高度自适应浏览器高度”涉及的核心知识点是如何让Iframe的大小根据其内容自动调整,特别是高度,以便始终保持与浏览器窗口的高度同步,从而提供更好的用户体验。 首先,我们需要了解Iframe的基本结构...

    iframe自适应高度demo

    /* 这会使得iframe自动填充剩余空间 */ } ``` 3. **CSS Grid**: 类似于Flexbox,CSS Grid布局也可以帮助我们实现`iframe`的自适应高度。将`iframe`放在一个grid容器中,并使用`auto-fill`或`auto-fit`作为行的...

    再谈iframe自适应高度

    "再谈iframe自适应高度"这个主题,关注的是如何使iframe的内容区域根据所加载页面的高度自动调整,以避免滚动条出现或者内容被截断的问题。在网页设计中,尤其是在构建响应式布局时,这是一个非常关键的优化点。 1....

Global site tag (gtag.js) - Google Analytics