`
xylw
  • 浏览: 60258 次
  • 性别: Icon_minigender_1
  • 来自: 南宁
文章分类
社区版块
存档分类
最新评论

如何实现iframe(嵌入式帧)的自适应高度

阅读更多
<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>   

使用的时候只要贴在<head></head>里面就可以了
分享到:
评论

相关推荐

    Iframe 高度自适应浏览器高度

    然而,当Iframe的内容动态变化或者内容长度超过预设的高度时,我们就需要实现高度自适应。有几种常见的方法可以实现这一目标: 1. **JavaScript/jQuery**: 一种常见的方法是使用JavaScript或jQuery监听页面的...

    iframe自适应高度js demo

    为了解决这个问题,我们需要实现一个自适应高度的`iframe`,使其能根据内部内容自动调整高度。本文将深入讲解如何通过JavaScript来实现这一功能。 首先,让我们理解`iframe`的基本用法。在HTML中,创建一个`iframe`...

    iframe自适应子页面内容高度

    在实际项目中,我们需要结合这个文件的内容来完善`iframe`高度自适应的实现。 总结,使`iframe`自适应子页面内容高度主要涉及以下几个方面: 1. 同源策略:确保`iframe`加载的页面与父页面在同一域名下。 2. ...

    IFRAME自适应

    - **CSS `padding-bottom` hack**:利用百分比`padding-bottom`可以实现IFRAME的自适应高度。设置IFRAME的`position: absolute;`和`height: 0;`,然后用`padding-bottom`设定宽高比,这样IFRAME会根据宽度自动调整...

    iframe高度自适应

    在实际应用中,由于浏览器的同源策略限制,如果`iframe`加载的内容与包含它的页面不在同一个域下,浏览器出于安全考虑不允许获取其内容的高度,这给实现自适应高度带来了挑战。 三、解决方案 1. **JavaScript/...

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

    在探讨“嵌入到HTML的iframe自动适应大小”的主题时,我们主要关注的是如何使一个内嵌在HTML页面中的iframe元素能够根据其内容或者父容器的尺寸动态调整自身的高度,从而实现良好的响应式设计和用户体验。...

    Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐

    为了解决这个问题,开发者通常需要编写特定的代码来让Iframe自适应其内容的高度。 本示例提供的是一段兼容IE、遨游、火狐等浏览器的Iframe自适应高度的JavaScript代码。这段代码的工作原理是通过JavaScript定时器...

    iframe实时高度检测

    因此,我们需要一个机制来实时检测`iframe`内部页面的高度,并动态调整`iframe`及父页面的高度,以实现自适应显示。 ### 3. 实时高度检测的实现 实现这一功能通常需要两部分代码:一部分在`iframe`内部,一部分在父...

    html嵌入html,高度自适应,标签切换。

    实现高度自适应的关键在于pym.js的`parentHeight`方法,它会发送一个消息到父页面,告知其当前iframe内容区域的高度,父页面接收到消息后,可以据此调整iframe的高度。 接下来是li标签的切换功能。在HTML中,li是...

    动态的改变IFrame的高度实现IFrame自动伸展适应高度

    为解决这个问题,我们可以实现IFrame的自动伸展,使其高度能动态适应内部内容的高度,从而避免滚动条的出现。 动态改变IFrame高度的实现主要分为两种方法: **具体实现一:** 1. **JavaScript实现** 在IFrame子...

    iframe多层级自动适应高度

    在网页开发中,`iframe`(Inline Frame)是一种嵌入式框架,用于在单个HTML文档中嵌入另一个HTML文档,常用于实现页面组件的复用或者加载外部内容。本主题探讨的是如何处理`iframe`多层级时的高度自适应问题,以确保...

    Iframe 自动适应页面的高度示例代码

    总结来说,这个示例展示了如何利用JavaScript实现Iframe的高度自适应。当Iframe内容发生变化或加载完成后,通过`SetCwinHeight`函数动态计算并设置Iframe的高度,确保内容完全可见,无需用户滚动。这种方法对于创建...

    Dreamwear设计常用代码 7-11.docx

    3. iframe(嵌入式帧)自适应高度: `iframe`用于在网页中嵌入另一个网页,但有时需要确保其高度自适应内容。例如: ```html &lt;iframe name="guestbook" src=...

    iframe实用操作锦集

    iframe高度自适应于父页面 有时候我们需要让`iframe`的高度适应父页面的剩余空间,这可以通过监听窗口的`resize`事件实现: ```javascript $(window).resize(function () { var webheight = document.body....

    pym跨域请求

    它通过动态调整iframe的大小来实现内容自适应,并提供了安全的跨域通信机制,使得不同源的网页可以在彼此之间交换信息。 **一、Pym.js 的主要功能** 1. **动态调整iframe大小**:Pym.js 的核心功能是能够根据...

    mediaWrapper.js:jQuery MediaWrapper

    jQuery mediaWrapper是一个用于打包制作iframe的插件,而在开发自适应网站时,嵌入式视频的行为更像图像。 当前,iframe将默认设置为嵌入代码设置的任意宽度。 该插件非常简单,它将iframe包裹在相对放置的容器中...

    三维展示BIM模型--php嵌套标签

    例如,可以根据用户的设备类型(PC或移动设备)自适应调整`&lt;iframe&gt;`的尺寸;或者根据用户的访问记录推荐相关的BIM模型。 综上所述,三维展示BIM模型与PHP嵌套标签技术的结合不仅可以有效地提高网站的交互性和功能...

    pdf.js+pdfobject.js

    PDF.js和PDFObject.js是两种在网页中...PDF.js适合需要高度定制和高性能渲染的项目,而PDFObject.js则是快速实现简单预览的理想选择。通过合理的组合使用,可以在保持良好用户体验的同时,充分利用JavaScript的灵活性。

Global site tag (gtag.js) - Google Analytics