让iframe自适应高度(支持XHTML,支持FF)_javascript技巧

先说明,这个办法只限于iframe中的子页面也是本地页面(不能引用外网页面)

======方法=====
第一步 js部分

function getSize() {
       var xScroll, yScroll;       
       if (window.innerHeight && window.scrollMaxY) {       
              xScroll = document.body.scrollWidth;
              yScroll = window.innerHeight + window.scrollMaxY;
       } else if (document.body.scrollHeight > document.body.offsetHeight){       // all but Explorer Mac
              xScroll = document.body.scrollWidth;
              yScroll = document.body.scrollHeight;
       } else {       // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
              xScroll = document.body.offsetWidth;
              yScroll = document.body.offsetHeight;
       }

       var windowWidth, windowHeight;
       if (self.innerHeight) {       // all except Explorer
              windowWidth = self.innerWidth;
              windowHeight = self.innerHeight;
       } else if (document.documentElement && document.documentElement.clientHeight) {       // Explorer 6 Strict Mode
              windowWidth = document.documentElement.clientWidth;
              windowHeight = document.documentElement.clientHeight;
       } else if (document.body) {       // other Explorers
              windowWidth = document.body.clientWidth;
              windowHeight = document.body.clientHeight;
       }       

       // for small pages with total height less then height of the viewport
       if(yScroll < windowHeight){
              pageHeight = windowHeight;
              y = pageHeight;
       } else { 
              pageHeight = yScroll;
              y = pageHeight;
       }

       if(xScroll < windowWidth){       
              pageWidth = windowWidth;
       } else {
              pageWidth = xScroll;
       }

       arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
       return arrayPageSize;
}
这段代码用来获取目标页的参数,包括页面高、宽,屏幕高、宽

function autoHeight(pid) {
       var x = new getSize();
       parent.document.getElementById(pid).height=x[1];
}
这段代码用来实现父页面中iframe的高度自适应

\\\\\\\\\\

第二步 页面部分

<div class="onright" style="width:480px;"><iframe id="infrm" name="infrm" marginwidth="0" marginheight="0" width="100%" src="park.htm" frameborder="0" scrolling="auto"></iframe>
这是父页面的iframe,没什么特别的,和普通的iframe一样,不过要设置好id值,以便子页面的参数调用。

<body onload="autoHeight('infrm')"></body>
在body中利用onload事件,将自身的高度传给父页面的iframe。

时间: 2024-09-25 20:42:20

让iframe自适应高度(支持XHTML,支持FF)_javascript技巧的相关文章

iframe 自适应高度[在IE6 IE7 FF下测试通过]_javascript技巧

第一种方法: 复制代码 代码如下: <script type="text/javascript" language="javascript"> <!-- //调整 PageContent 的高度 function TuneHeight() { var frm = document.getElementById("content01"); var subWeb = document.frames ? document.frames

javascript控制iframe自适应高度例子

iframe有一个烦人的问题,就是在没有设置高度的情况下,被嵌套区会显示一大片空白,有时候设置了高度也不行,后来用JavaScript轻松解决了iframe自适应高度的问题,下面把经验和具体方法分享出来. 为了演示方便,这里需要2个页面,一个是被iframe的页,一个是母页面,先来看母页面,也就是有iframe代码的页面:  代码如下 复制代码 <html> <head> <title>iframe自适应加载的网页高度</title> </head&g

关于IFRAME 自适应高度的研究

自适应 代码如下: <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta name="GENERATOR" content="Microsoft FrontPage 4.0"><meta name="ProgId" content=&qu

iframe 自适应高度方法

不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以"伸缩自如",所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大 家一种iframe动态调整高度的方法,主要是以下JS函数: 第一种方法:代码简单,兼容性还可以,大家可以先测试下. 复制代码代码如下: function SetWinHeight(obj)  {  var win=obj;  if (docum

经典的iframe自适应高度方法总结

iframe高度自适应 iframe高度自适应是一个很老的话题.html5虽然已经将frame 框架给废弃,但是iframe这个标签还是存在的.假如有同学不了解frame和iframe的区别,可以看我之前的文章:html框架之iframe和frame及frameset的相关属性介绍. 虽然现在iframe在项目中已经很少出现了,但是有些项目迫不得已,还是会用到iframe.近期遇到一个案例,就用到了iframe. 基本案例如下: 由于手机浏览器预览PDF不是很好,因此,将手机上预览PDF改成预览

Javascript使iframe自适应高度实例

工作中我们遇到了iframe嵌入页面高度自适应的问题.因为我们不知道所加载的iframe内容页面会有多高,又不想在页面上出现难看的滚动条,这个时候我们可以使用Javascript来动态让iframe自适应高度. 准备工作 我们准备一个主页面a.html,以及两个用于嵌入iframe的页面分别为iframeH.html和iframeH1.html,内容可以自己随便加,实际应用中可能是后台生成的内容. 为了演示,我们在主页面a.html中加入如下代码:   <div class="opt_bt

iframe自适应高度解决方案详细教程

通过Google搜索iframe 自适应高度,结果5W多条,搜索iframe 高度自适应,结果2W多条. 我翻了前面的几十条,刨去大量的转载,有那么三五篇是原创的.而这几篇原创里面,基本上只谈到如何自适应静的东西,就是没有考虑到JS操作DOM之后,如何做动态同步的问题.另外,在兼容性方面,也研究的不彻底. 这篇文章,希望在这两个方面再做一些深入. 可能有人还没接触到这个问题过,先说明一下,什么是自适应高度吧.所谓iframe自适应高度,就是,基于界面美观和交互的考虑,隐藏了iframe的 bor

网页设计技巧:iframe自适应高度

可能有人还没接触到这个问题过,先说明一下,什么是自适应高度吧.所谓iframe自适应高度,就是,基于界面美观和交互的考虑,隐藏了iframe的border和scrollbar,让人看不出它是个iframe.如果iframe始终调用同一个固定高度的页面,我们直接写死iframe高度就可以了.而如果iframe要切换页面,或者被包含页面要做DOM动态操作,这时候,就需要程序去同步iframe高度和被包含页的实际高度了. 顺便说下,iframe在迫不得已的时候才去用,它会给前端开发带来太多的麻烦. 传

JavaScript 处理Iframe自适应高度(同或不同域名下)_javascript技巧

1.同域名下Iframe自适应高度的处理 复制代码 代码如下: <iframe onload="Javascript:SetIFrameHeight(this)" src="../Home/b" id="win" name="win" width="100%" height="1"> </iframe> 当然此处我用的是Asp.Net MVC 此处src设置为路由

JS实现iframe自适应高度的方法(兼容IE与FireFox)_javascript技巧

本文实例讲述了JS实现iframe自适应高度的方法.分享给大家供大家参考,具体如下: 之前一直被iframe自适应高度的问题困扰,很多JS代码在FF里面似乎就变成哑巴了.后来下面这段代码终于被我从万千号称兼容FF的代码堆中翻了出来.我已经用过了,真的好用.尤其是对于我这样的JS水平较低(真不好意思)的人来说,这段代码简单易懂,方便修改,只要把下面的代码复制粘贴到iframe所在页面的<body>标签里面,并且修改一下ID名就行了(注意,要修改的地方有两个,位置在代码中有说明). 向原创这段代码