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

在iframe中使用js代码实现自动设置栽入的页面的高度

    博客分类:
  • HTML
阅读更多
http://blog.csdn.net/wumingwei_123/archive/2008/07/08/2624477.aspx

以前在项目中经常遇到 使用iframe的是时候子页的高度始终调整不好
为此很浪费时间 在网上搜索了哈 部分功能有 于是作了个修改
代码如下:
<script type="text/javascript">
//自动调整iframe框架的方法 
function iframeAuto() { 
 try { 
    if(window!=parent) {
             //定位需要调整的frame框架(在父级窗口中查找) 
             var a = parent.document.getElementsByTagName("IFRAME"); 
         for(var i=0; i<a.length; i++) { 
	     if(a[i].contentWindow==window){ 
                  var h1=0, h2=0; 
                  a[i].parentNode.style.height = a[i].offsetHeight+"px";
                  a[i].style.height = "10px";   
                  //首先设置高度为10px,后面会修改 
                 if(document.documentElement&&
                      document.documentElement.scrollHeight){ 
                       h1=document.documentElement.scrollHeight; 
                    } 
                 if(document.body) 
                     h2=document.body.scrollHeight;
                 var h=Math.max(h1, h2);      
                 //取两者中的最大值 
                 if(document.all) {h += 4;} 
                 if(window.opera) {h += 1;} 
                 //调整框架的大小 
                 if(h>540) {
                   a[i].style.height=a[i].parentNode.style.height=h +"px"; 
                 } else {
                   a[i].style.height=a[i].parentNode.style.height= 540+"px";
                 } 
                 //这个地方可以根据实际的情况进行修改 
               }//end if 
            }//end for
        }//end if
    } catch (ex)
    {} 
  } //end function
    //事件绑定的方法,支持IE5以上版本 
    if(window.attachEvent)
       { 
          window.attachEvent("onload", iframeAuto); 
       } else if(window.addEventListener) { 
          window.addEventListener('load', iframeAuto, false); 
       } //--> 

</script>

里面大部分的代码都已经注释了 我想应该很详细了
希望对大家有帮助 特别说明 这个写成文件后可以在多iframe的页面使用 互不干扰
分享到:
评论

相关推荐

    jsp页面iframe高度自适应的js代码.docx

    jsp 页面 iframe 高度自适应的 js 代码是指在 jsp 页面中使用 iframe 元素,並且使其高度能够自适应内容的高度。这种技术在实际应用中非常有用,例如在某些网页中,我们需要在 iframe 中嵌入一个内嵌页面,并且使其...

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

    在网页开发中,`iframe`(Inline Frame)是一种非常有用的元素,它允许我们在一个页面中嵌入另一个页面的内容。然而,`iframe`的高度自动适应往往成为开发者面临的问题,特别是当嵌入的内容高度不确定时。标题提到的...

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

    在给定的代码示例中,通过定义一个名为`setHeight`的函数来实现动态调整`iframe`高度的功能。 ```javascript function setHeight() { var iframe = document.getElementById("read_iframe"); try { var aHeight =...

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

    在网页开发中,`&lt;iframe&gt;`元素是一种非常实用的工具,它允许我们在一个页面中嵌入另一个页面的内容,实现页面的组合或者隔离加载。然而,`&lt;iframe&gt;`的高度自适应问题常常困扰着开发者,尤其是当`&lt;iframe&gt;`内部的内容...

    iFrame 自动调整高度

    本文详细介绍了如何实现`&lt;iframe&gt;`自动调整高度的方法,包括了JavaScript动态调整高度的具体实现步骤和代码示例,同时也提到了使用CSS布局技巧的方案。通过这些方法,可以有效地解决`&lt;iframe&gt;`内容变化时高度不适应...

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

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

    自动改变iframe的高度

    通过上述方法,可以有效地实现`iframe`自动改变高度的功能,提高网页的灵活性和用户体验。需要注意的是,在实际开发过程中还需要考虑各种特殊情况和兼容性问题,确保功能在不同环境下的稳定性。 总之,`iframe`自动...

    iframe高度自适应.pdf

    实现`iframe`高度自适应的基本思路是在页面加载完成或者窗口大小发生变化时,通过JavaScript动态计算嵌入内容的实际高度,并相应地调整`iframe`的高度。这种方法的核心在于编写合适的JavaScript函数来获取嵌入内容的...

    iframe自动适应高度

    在网页开发中,`iframe`(Inline Frame)是一种非常有用的元素,它允许我们在一个HTML页面中嵌入另一个HTML页面。`iframe`常用于实现页面组件的复用、内容的动态加载,或者展示第三方内容,如广告、地图、视频等。...

    iframe自适应高度js demo

    这样,当`iframe`中的页面加载完毕时,`onload`事件会触发`setIframeHeight`函数,从而自动调整`iframe`的高度至内容的完整高度。 然而,需要注意的是,由于同源策略的限制,如果`iframe`加载的页面与父页面不在同...

    用jquery实现iframe高度自适应实例代码完美兼容多数浏览器

    在网页开发中,有时我们需要使用`iframe`来嵌入外部页面或者内容,但是`iframe`的高度自适应问题一直是一个常见的挑战。特别是在不同浏览器之间,由于兼容性问题,往往需要额外的处理才能达到理想的效果。本篇文章将...

    在iframe 中页面中设置遮罩遮罩层

    总结一下,创建一个在iframe中使用的页面遮罩层,需要以下步骤: 1. 添加一个`iframe`元素,设置其`src`属性指向要嵌入的页面。 2. 创建一个CSS类来定义遮罩层的样式。 3. 编写JavaScript函数以控制遮罩层的显示与...

    Iframe框架高度自适应的实现.doc

    这段JavaScript代码的作用是在父页面中检测并调整Iframe的高度,使其与内容的实际高度保持一致,从而避免滚动条的出现。代码首先检查当前窗口是否为顶级窗口,如果不是,即它处于一个Iframe中,那么就开始执行高度...

    iframe自适应子页面内容高度

    在同源情况下,可以使用以下JavaScript代码动态调整`iframe`高度: ```javascript function resizeIframe(iframeId) { var iframe = document.getElementById(iframeId); if (iframe && iframe.contentWindow && ...

    iframe显示全部内容代码

    为了确保`iframe`能够自动调整其高度以适应内部内容的大小,并且不显示滚动条,我们需要使用以下方法: 1. **动态调整高度**: 使用JavaScript监听`iframe`的加载事件,并根据其内部文档的实际高度来调整`iframe`...

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

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

    iframe自适应高度和宽度

    在上面的例子中,使用了`onload`事件来监听`iframe`内容加载完成,然后通过`document.all['myframe']`获取到`iframe`元素,并通过`myframe.document.body.scrollHeight`获取内部文档的实际高度,最后将这个高度设置...

    iframe框架使用(完美版)

    `iframe.js`可能是包含了上述封装的JavaScript代码文件,通过引入这个文件,开发者可以在任何需要的地方调用`setIFrameHeight`函数,实现iframe的高度自适应。 总的来说,理解和掌握iframe的使用,以及如何实现...

    iframe高度自适应

    在网页开发中,`iframe` 是一个非常重要的元素,它允许我们嵌入其他网页或页面内容到当前页面中。然而,`iframe` 的高度自适应往往是一个常见的问题,特别是当`iframe`内容动态加载或者不同浏览器之间存在差异时。...

    网页制作中Iframe自适应高度的解决办法

    在网页制作过程中,Iframe(内联框架)是一种常见的元素,用于在页面中嵌入其他网页或者内容。然而,Iframe的高度自适应往往是一个棘手的问题,因为如果内容动态加载或者不同长度,Iframe默认的高度可能无法适配,...

Global site tag (gtag.js) - Google Analytics