不得不用到iframe,且被强烈要求不能让它出现滚动条!嵌入的页面肯定是高度不一的,页面中也不能出现大片空白,所以也不能写死高度!真是麻鬼烦啊!

google N次 + 百度M次 + 试验了1605次之后(听说农药1605就是实验了这么多次后出来的),得出下面成果,在IE7及Firefox3里试了下还能凑合着用用!

1、首先给出个Iframe。

marginheight="0"

marginwidth="0"

height="100"

width="1000"

frameborder="0"

scrolling="no"

src="xxxxx.html">

2、然后看看怎么获取Iframe中的页面的高度。

其实最麻烦的就是怎么让获取的高度准确,不同的方式不同的浏览器中获取到的值都会不一样!晕啊~~。参考了多方意见得出以下javascript函数(doc参数为window.document对象):

function getDocHeight(doc)

{

//在IE中doc.body.scrollHeight的可信度最高

//在Firefox中,doc.height就可以了

var docHei = 0;

var scrollHei;//scrollHeight

var offsetHei;//offsetHeight,包含了边框的高度

if (doc.height)

{

//Firefox支持此属性,IE不支持

docHei = doc.height;

}

else if (doc.body)

{

//在IE中,只有body.scrollHeight是与当前页面的高度一致的,

//其他的跳转几次后就会变的混乱,不知道是依照什么取的值!

//似乎跟包含它的窗口的大小变化有关

if(doc.body.offsetHeight) docHei = offsetHei = doc.body.offsetHeight;

if(doc.body.scrollHeight) docHei = scrollHei = doc.body.scrollHeight;

}

else if(doc.documentElement)

{

if(doc.documentElement.offsetHeight) docHei = offsetHei = doc.documentElement.offsetHeight;

if(doc.documentElement.scrollHeight) docHei = scrollHei = doc.documentElement.scrollHeight;

}

/*

docHei = Math.max(scrollHei,offsetHei);//取最大的值,某些情况下可能与实际页面高度不符!

*/

return docHei;

}

3、最后修改Iframe的高度,并用一个定时器来不间断检查它包含的页面的高度变化。

function doReSize()

{

var iframeWin = window.frames['ifrm'];

var iframeEl = window.document.getElementById? window.document.getElementById('ifrm'): document.all? document.all['ifrm']: null;

if ( iframeEl && iframeWin )

{

var docHei = getDocHeight(iframeWin.document);

if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px';

}

else if(iframeEl)

{

var docHei = getDocHeight(iframeEl.contentDocument);

if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px';

}

}

function runResizeTask()

{

doReSize();

setTimeout("runResizeTask()",500);//每隔半秒执行一次

}

runResizeTask();

在这里就没有去考虑被包含的页面中是否有折叠、隐藏/展现的情况了!

完整js代码

function getDocHeight(doc){

//在IE中doc.body.scrollHeight的可信度最高

//在Firefox中,doc.height就可以了

var docHei = 0;

var scrollHei;//scrollHeight

var offsetHei;//offsetHeight,包含了边框的高度

if (doc.height){

//Firefox支持此属性,IE不支持

docHei = doc.height;

}

else if (doc.body){

//在IE中,只有body.scrollHeight是与当前页面的高度一致的,

//其他的跳转几次后就会变的混乱,不知道是依照什么取的值!

//似乎跟包含它的窗口的大小变化有关

if(doc.body.offsetHeight) docHei = offsetHei = doc.body.offsetHeight;

if(doc.body.scrollHeight) docHei = scrollHei = doc.body.scrollHeight;

}

else if(doc.documentElement){

if(doc.documentElement.offsetHeight) docHei = offsetHei = doc.documentElement.offsetHeight;

if(doc.documentElement.scrollHeight) docHei = scrollHei = doc.documentElement.scrollHeight;

}

/*

docHei = Math.max(scrollHei,offsetHei);//取最大的值,某些情况下可能与实际页面高度不符!

*/

return docHei;

}

function doReSize(){

var iframeWin = window.frames['Main'];

var iframeEl = window.document.getElementById? window.document.getElementById('Main'): document.all? document.all['Main']: null;

if ( iframeEl && iframeWin ){

var docHei = getDocHeight(iframeWin.document);

if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px';

}

else if(iframeEl){

var docHei = getDocHeight(iframeEl.contentDocument);

if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px';

}

}

function runResizeTask(){

doReSize();

setTimeout("runResizeTask()",1000);//每隔1秒执行一次

}

runResizeTask();

监听页面高度变化_Iframe 自适应高度并实时监控高度变化的js代码相关推荐

  1. java计算器监听放大缩小,js监听页面放大缩小

    demo body[zoom='scale']:before{ content: '您的网页处于缩放状态,请按 Ctrl+0 恢复到浏览器默认大小'; z-index: 9999; position: ...

  2. html监听页面滚动高度,jquery如何监听滚动条事件?

    jquery如何监听滚动条事件?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 问题: 在浏览很多网页中都会发现,当滚动条滚动到一定的位置的时候就出显示一 ...

  3. js监听页面元素变化window.MutationObserver

    相信前端开发同学都熟悉各种各样的监听事件,比如元素点击事件onClick,鼠标事件onMouseDown.onMouseHover,键盘按键onKeyDown,浏览器窗口改变事件onResize等等. ...

  4. vue 监听页面滚动事件:触发animate.min.css动画特效

    一.问题答疑: 1. animate.css 如何在vue项目中引入?或引用? 2. 如何监听滚动事件,触发animate.class动画播放? vue 监听滚轮滚动事件,for循环 ,动态id,代码 ...

  5. jq监听页面的滚动事件,

    jQuery监听页面的滚动状态,实现代码: $(document).scroll(function() {        var scroH = $(document).scrollTop(); // ...

  6. vue监听页面滚动事件

    方法:监听滚动实现 通过addEventListener方式监听 通过scroll获取到滚动 export default {data () {return {topNavBg: {backgroun ...

  7. js监听页面或元素scroll事件,滚动到底部或顶部

    基本原理: 1.滚动到底部 元素的滚动距离 + 元素的可视距离 == 元素的滚动条总距离2.滚动到顶部 元素的滚动距离 == 0 监听页面滚动 <!DOCTYPE html> <ht ...

  8. 如何监听页面 DOM 变动并高效响应

    最近在做 chrome 插件开发,既然是插件那就难免不对现有页面做一些控制,比如事件监听.调整布局.对 DOM 元素的增删改查等等.其中有一个需求比较有意思,便整理一下顺便把涉及到的知识点复习一遍. ...

  9. 监听页面滚动触发事件,页面停止滚动触发事件

    监听页面滚动触发事件,页面停止滚动触发事件 核心代码 data() {return {timer: null,isTipVisible: true} } methods: {handleScrollS ...

  10. Vue中监听页面刷新和关闭beforeunload事件

    代码 在methods中定义事件方法,在mounted 生命周期钩子中绑定事件, 在destoryed钩子中卸载事件 mounted () {window.addEventListener('befo ...

最新文章

  1. 邻接表存储(链式前向星)
  2. 2020.2idea怎么创建html模块_利用idea快速搭建一个项目
  3. kali桥接模式无法上网_听没听过用手机接路由器上网?
  4. Markdown基本语法总结
  5. html下拉框传递参数,HTML通过事件传递参数到js详解及实例
  6. MariaDB的简单使用
  7. 数据需求有多野?“三连问”帮你处理得明明白白
  8. 谈谈主策划需要的能力
  9. 惠普局域网共享打印机设置_惠普打印机局域网共享
  10. plm系统 服务器不存在,PLM服务器和客户端使用方式
  11. STM32小车篇之超声波测距
  12. 潇潇六月雨 input file里的JQ change() 事件的只生效一次
  13. 安卓怎么转移到iphone_如何将联系人从iPhone转移到另一部电话
  14. 邮件工具-MailUtil(发送邮件)
  15. 收藏转载樱花飘落代码
  16. 赵小楼《天道》《遥远的救世主》深度解析(117)分离已有的各种相,得你想要的结果
  17. 服务器七雄争霸官方网站,腾讯七雄争霸微端登录器
  18. google map 离线数据
  19. Java中的IO流修改
  20. android开发常用组件和第三方库(二)

热门文章

  1. 如何做好抖音直播,实现高效引流变现?
  2. 前端网页技术HTML
  3. unity build设置_Microsoft Build上的Unity:展会上的7个重点
  4. 想要挑战高薪,不懂算法怎么能行??10 大常用机器学习算法
  5. 我需要一段计算js散度的python代码
  6. 数据库基础的试题汇总 下
  7. mysql 赋给用户远程权限 grant all privileges on
  8. 解决方法dataSource init error java.sql.SQLException: com.mysql.cj.jdbc.Driver
  9. Python考试评级
  10. 提取中文句子主谓宾的Java实现