`
newpeter
  • 浏览: 39762 次
  • 性别: 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高度,而不显示其滚动条 js

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

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

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

    layer实现弹出层自动调节位置

    为了适应内容的变化,layer插件提供了layer.iframeAuto方法,该方法能够根据iframe内部HTML的高度自动调整iframe的大小,从而实现弹出层内容的自适应。 然而,作者在使用layer.iframeAuto方法时遇到了一个问题,即...

    百度富文本编辑器ueditor上传图片宽高超范围问题2018.7.3补充

    如果使用ueditor的内置功能插入图片,需要修改`ueditor\ueditor.all.min.js`中的单图上传按钮代码,以确保图片被插入时自动调整宽度。 ### 补充:处理粘贴带有图片的Word文档 2018年7月3日的更新中,提到了处理在...

    Ueditor配置整理说明

    - **设置初始内容**:通过 `setContent` 方法设置编辑器的初始内容。 #### 8. 自定义按钮 除了内置的工具栏按钮外,Ueditor还支持自定义按钮,可以扩展编辑器的功能或集成外部服务。实现自定义按钮的方法主要包括...

    全功能多种网页播放器大集合

    但为了实现更丰富的交互功能,如播放/暂停控制、进度条、音量调节等,开发者通常会依赖JavaScript库或框架,如JW Player、Vimeo Player、YouTube IFrame Player API等。这些播放器不仅提供了基本的播放功能,还支持...

    html 视频播放器

    通过设置 `src` 属性指定视频源,`controls` 属性添加控制条(如播放/暂停按钮、音量调节等),可以创建一个基本的视频播放器。例如: ```html &lt;video src="myVideo.mp4" controls&gt;&lt;/video&gt; ``` 然而,由于浏览器...

    海量经典的jQuery插件集合

    - **应用场景**:适用于需要在iframe内编辑内容的场景。 **4. Jeditable – edit in place plugin for jQuery** - **功能概述**:实现在位编辑功能。 - **应用场景**:适用于需要快速编辑表单内容的场景。 #### ...

Global site tag (gtag.js) - Google Analytics