`
newpeter
  • 浏览: 39297 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

Iframe高度随内容自动调节

阅读更多

方式一:在被嵌入页里写入代码
假设main.htm文件内容:
    <iframe src="iframe.htm"></iframe>
则在iframe.htm文件中加入如下代码:
    <script language="JavaScript">
    <!--
    function window.onload() { 
        if(top.location != self.location){ 
            var a = window.parent.document.getElementsByTagName('iframe'); 
            for (var i=0; i<a.length; i++){ 
                if (a[i].name == self.name) {
                    a[i].height = document.body.scrollHeight+10; return;
                }
            }
        } 
    }
    // -->
    </script>
要测试效果则在iframe.htm文件中再加入一个表格(表格高度设大些):
    <table width="100%" height="1000"><tr><td valign="bottom">Hello!</td></tr></table>

用浏览器打开mail.htm就可以预览效果。

方式二:在父页中加入代码,被嵌入页不变(有两种方法)
一法:

在父页中加入如下代码:
<script language="Javascript">
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
//extra height in px to add to iframe in FireFox 1.0+ browsers
var FFextraHeight=getFFVersion>=0.1? 16 : 0 

function dyniframesize(iframename) {
var pTar = null;
if (document.getElementById){
    pTar = document.getElementById(iframename);
}
else{
    eval('pTar = ' + iframename + ';');
}
if (pTar && !window.opera){
    //begin resizing iframe
    pTar.style.display="block"
    
    if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){
      //ns6 syntax
      pTar.height = pTar.contentDocument.body.offsetHeight+FFextraHeight; 
    }
    else if (pTar.Document && pTar.Document.body.scrollHeight){
      //ie5+ syntax
      pTar.height = pTar.Document.body.scrollHeight;
    }
}
}
</script>
<iframe id="myTestFrameID" onload="javascript:{dyniframesize('myTestFrameID');}" marginwidth=0 marginheight=0 frameborder=0 scrolling=nosrc="myiframe.htm" width=200 height=100></iframe>

然后myiframe.htm中为正常页面内容。

用浏览器打开父页即可看到效果,该方法对各种浏览器通用,包括IE、FF、Opera等。

二法:
在父页中写入以下代码:
<iframe id=headlogin marginWidth=0 marginHeight=0 src="myiframe.htm" frameBorder=0 width=100% scrolling=no height=25onload="this.height=this.contentWindow.document.body.scrollHeight"></iframe> 

用浏览器打开父页即可看到效果。以上JScript代码在opera下不能正常显示出效果。

分享到:
评论

相关推荐

    iframe高度随子页高度变化

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

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

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

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

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

    iframe根据页面内容自适应高度和宽度

    为了解决这个问题,我们需要让`iframe`根据其内容自动调整高度和宽度。本篇文章将详细探讨如何实现`iframe`根据页面内容自适应高度和宽度。 首先,我们需要理解`iframe`的基本结构。一个简单的`iframe`标签如下: ...

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

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

    iframe高度自适应.pdf

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

    iFrame 自动调整高度

    这样`&lt;iframe&gt;`会根据内容自动扩展高度。 - 使用Grid布局: ```html ;"&gt; &lt;iframe id="iyxzl" src="your-url.html" style="grid-row: 1 / span 1;"&gt;&lt;/iframe&gt; ``` #### 六、总结 本文详细介绍了如何实现`...

    iframe 跨域 自动适应高度

    然而,`iframe`在处理跨域内容时,会受到同源策略的限制,导致一些功能无法正常使用,比如获取iframe内的DOM元素或设置其高度。本文将详细讲解如何解决`iframe`跨域问题以及实现自动适应高度的功能。 1. **同源策略...

    自动改变iframe的高度

    ### 自动改变iframe的高度 在Web开发中,`iframe`是一种常用的技术,它允许在一个HTML页面中嵌入另一个HTML页面。然而,在实际应用过程中,如何让`iframe`根据其内部内容自适应高度,是一个常见的需求。本文将详细...

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

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

    js实现iframe自适应高度

    然而,`iframe` 的一个常见问题是其内容区域的高度可能超过其本身的显示区域,导致滚动条出现或者内容被截断。为了解决这个问题,我们需要让`iframe`能够自适应其内容的高度。本文将详细讲解如何使用JavaScript实现`...

    iframe自动适应高度

    // iframe内容页 window.parent.postMessage({height: document.documentElement.scrollHeight}, '*'); // 父页面 window.addEventListener('message', function(event) { if (event.origin !== '预期的源') ...

    Iframe 高度自适应浏览器高度

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

    跨域控制iframe高度

    它们通常使用`postMessage`,并在iframe内部检测内容变化,自动调整高度。 3. **服务器端配合**:如果能够控制iframe加载的页面,可以在服务器端添加一个特殊的查询参数,比如`height`,并根据这个参数返回动态调整...

    javascript动态调整iframe高度

    然而,由于`iframe`内容加载后可能会有不同的高度,如果不能自适应调整,可能会导致页面布局错乱。`javascript`提供了解决这个问题的方案,即动态调整`iframe`的高度,确保内容完整显示,同时保持页面整洁美观。下面...

    iframe自适应高度和宽度

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

    iframe实时高度检测

    "iframe实时高度检测"是解决了一个常见问题:当我们在一个页面中使用`iframe`展示其他内容时,如何确保`iframe`的内容能够完全显示,而不需要滚动条或者部分内容被裁剪。 ### 1. `iframe`的基本用法 `iframe`标签...

    iframe高度自适应

    2. **自适应需求**:随着内容的变化自动调整`&lt;iframe&gt;`的高度,避免出现不必要的滚动条或内容被隐藏的情况。 #### 二、实现方法 ##### 1. JavaScript动态调整高度 通过JavaScript监听`&lt;iframe&gt;`加载完成事件(`...

    iframe页面的高度iframe高度自适应

    iframe包含的页面的高度,兼容性好,iframe高度自适应

    iframe自适应子页面内容高度

    然而,若希望`iframe`的高度自动适应子页面内容,我们需要进行一些额外的处理。 首先,由于同源策略的限制,只有当`iframe`加载的页面与包含它的页面在同一域名下时,我们才能通过JavaScript获取`iframe`的内容信息...

Global site tag (gtag.js) - Google Analytics