首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJuly 24, 2007

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

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript同步Import,同步调用外部js的方法
Jul 08 Javascript
JS 自动安装exe程序
Nov 30 Javascript
javascript从右边截取指定字符串的三种实现方法
Nov 29 Javascript
使用js实现一个可编辑的select下拉列表
Feb 20 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
老生常谈Bootstrap媒体对象
Jul 06 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
Sep 18 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
一个JS翻页效果
Jul 23 #Javascript
XML的代替者----JSON
Jul 21 #Javascript
js右键菜单效果代码
Jul 21 #Javascript
$()JS小技巧
Jul 21 #Javascript
IE 缓存策略的BUG的解决方法
Jul 21 #Javascript
用JS实现的一个include函数
Jul 21 #Javascript
代码精简的可以实现元素圆角的js函数
Jul 21 #Javascript
procedure(1) 自定义函数(1) 内置函数(1) harbor(1) GoFrame(3) commit(1) Navicat(1) pytz(1) 分布式锁(3) Tablespace(1)
You might like
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
PHP连接access数据库
2015/03/27 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
基于javascript实现彩票随机数生成（简单版）
2020/04/17 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
支付宝小程序实现省市区三级联动
2020/06/21 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
Python help()函数用法详解
2014/03/11 Python
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
Python六大开源框架对比
2015/10/19 Python
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
Django csrf 验证问题的实现
2018/10/09 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
Python如何实现大型数组运算（使用NumPy）
2020/07/24 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
给儿子的表扬信
2014/01/15 职场文书
项目建议书格式
2014/03/12 职场文书
催款函怎么写
2015/06/24 职场文书
如何利用React实现图片识别App
2022/02/18 Javascript
MongoDB支持的索引类型
2022/04/11 MongoDB