让iframe自适应高度（支持XHTML，支持FF）

先说明，这个办法只限于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。

赞 (0)

相关推荐

  • Html中 IFrame的用法及注意点

    0x01 iframe的跳出框架 0x02 iframe样式设置 0x03 iframe重置高度 1.首先来一个,跳出iframe的好方法,直接可以在Login.aspx页面使用. if (window.parent.[IFRAME外壳的某方法]) { top.location.href = "Login.aspx"; } 2.再来段比较好看的iframe <script type="text/javascript"> function SetWinHe

  • js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]

    <iframe id= "myframe" ></iframe> W3C的标准告诉我们,可以通过Dom对象的contentDocument属性来返回文档对象. 即 复制代码 代码如下: doc= document.getElementById('myframe' ).contentDocument 但对IE浏览器来说,经过测试,IE6,IE7都不支持,IE8开始支持了. 在IE下,需要这样来访问 复制代码 代码如下: document.frames['myfra

  • 让iframe自适应高度（支持xhtml）IE firefox兼容

    获取页面高度,窗口高度,滚动条高度等参数值 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 = docume

  • js取得html iframe中的元素和变量值

    上周想要取得iframe中的元素和js变量值,一直没取得,查资料得知: 不能用$(document).ready()方法,而是要用$("#iframeId").load()方法,待iframe加载完成,才能取得 取iframe中的js变量值: document.frames['x'].y 这样便可以. 哎,很简单的问题,搞了很长时间,不应该啊!

  • 设置iframe的document.designMode后仅Firefox中其body.innerHTML为br

    设置iframe的document.designMode后仅Firefox中其body.innerHTML为br

    重现如下: 复制代码 代码如下: <!doctype html> <html> <head> <title>设置iframe的document.designMode后仅Firefox中其body.innerHTML为br</title> <meta charset="utf-8"> </head> <body> <iframe frameborder="1" sty

  • 在Flex(Flash)中嵌入HTML代码或页面(Flex IFrame)

    在Flex(Flash)中嵌入HTML代码或页面(Flex IFrame)

    在flex组件中嵌入html代码,可以利用flex iframe.这个在很多时候会用到的,有时候flex必须得这样做,如果你不这样做还真不行-- flex而且可以和html进行JavaScript交互操作,flex调用到html中的JavaScript方法以及获取调用后的返回值. 1.flex iframe下载地址:https://github.com/downloads/flex-users/flex-iframe/flex-iframe-1.5.1.zip 下载完成后目录如下  asdoc就

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

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

  • iframe自适应高度的多种方法方法小结

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

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

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

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

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

  • jquery ajax应用中iframe自适应高度问题解决方法

    iframe自适应高度本身是很简单的方法,就是在页面加载完成后,重新计算一下高度即可. 代码如下: 复制代码 代码如下: //公共方法:设置iframe的高度以保证全部显示数据//function SetPageHeight() {//    var iframe = getUrlParam('ifname');//    var myiframe = window.parent.document.getElementById(iframe);//     iframeLoaded(myifra

  • 关于IFRAME 自适应高度的研究

    关于IFRAME 自适应高度的研究--之前自己也碰到过这个问题,为了得到答案去网上搜索,发现有不少人也遇到了这样的问题,现在就把解决方法共享一下. 重要提示:src=中你必须填写的网页地址,一定要和本页面在同一个站点上,否则,会抱错,说"拒绝访问!" 之前自己也碰到过这个问题,为了得到答案去网上搜索,发现有不少人也遇到了这样的问题,现在就把解决方法共享一下 超简单哦 1.建立一个bottom.js的文件,然后输入下面的代码(只有两行哦) parent.document.all(&quo

  • JS实现iframe自适应高度的方法示例

    本文实例讲述了JS实现iframe自适应高度的方法.分享给大家供大家参考,具体如下: <iframe id="mainFrame" name="mainFrame" src="/zwgk/hsearchview" width="740" frameborder="0" scrolling="no" scrolling="no" frameborder="

  • 使用jQuery不判断浏览器高度解决iframe自适应高度问题

    这里介绍两个超级简单的方法,不用写什么判断浏览器高度.宽度啥的. 下面的两种方法自选其一就行了.一个是放在和iframe同页面的,一个是放在test.html页面的. 注意别放错了地方. iframe的代码中,注意要写ID,没有ID查找不到 复制代码 代码如下: <iframe src="test.html" id="main" width="700" height="300" frameborder="0&q

  • 兼容主流浏览器的iframe自适应高度js脚本

    兼容主流浏览器的 Iframe 自适应高度,js脚本如下: 复制代码 代码如下: //iframe 高度自适应 function iframeAutoFit(iframeObj) { setTimeout(function () { if (!iframeObj) return; iframeObj.height = (iframeObj.Document ? iframeObj.Document.body.scrollHeight : iframeObj.contentDocument.bod

  • 让iframe自适应高度（支持XHTML，支持FF）

    先说明,这个办法只限于iframe中的子页面也是本地页面(不能引用外网页面) ======方法===== 第一步 js部分 function getSize() {        var xScroll, yScroll;               if (window.innerHeight && window.scrollMaxY) {                      xScroll = document.body.scrollWidth;               yS

随机推荐