标题 | 描述 |
---|---|
一、解决方法 | 解决代码 |
二、关于高度问题 | 简单讲一下jquery中的 height() ,innerHeight() 、outHeight() ,js中的 offsetHeight 、clientHeight 、scrollHeight 。如何获取没有给出高度的元素的高度? 详细介绍offsetHeight,clientHeight,scrollHeight之间的区别 |
三、试验历程 | 例举了一下我写这个遇到的坑,以及怎么得出最后的方案。 |
一、解决方法
因为我这是 宽度已知,整体居中的布局,滚动条加在 iframe 标签上会很奇怪,而且iframe的高度不确定,所以滚动条只能加给父级body上。
//自动计算Iframe的高度
(function(){//根据ID获取iframe对象var ifr = document.getElementById('iframe-box'); ifr.onload = function() { //DOM0级事件,没有兼容var timer = setTimeout(function(){clearTimeout(timer);//解决打开高度太高的页面后再打开高度较小页面滚动条不收缩ifr.style.height='0px';var iDoc = ifr.contentDocument || ifr.document || ifr.contentWindow;var height = Math.max(calcPageHeight(iDoc));ifr.style.height = height + "px";},200) }// 计算页面的实际高度,iframe自适应会用到function calcPageHeight(doc) {var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight);var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight);var height = Math.max(cHeight, sHeight);return height;}
})();
注意:
(1)iframe 是双标签,需要结尾:<iframe></iframe>
(2)iframe 标签中的 scrolling 要为 “no”,禁止 iframe 的滚动条;
(3)记得使用延时器,因为 iframe 中有异步操作,iframe中的DOM结构和资源加载完成,可能异步还没有执行完,所以用延时器改变一下加载 iframe 子元素高度的顺序。
(4)如果需要对同 iframe 做相同事件,但是逻辑不同的操作,使用事件监听。
//事件监听的封装函数---通过事件监听写的逻辑操作也称 DOM2级事件。DOM2级事件存在兼容问题
function addEvent(ele,type,callback){
if(ele.addEventListener){
ele.addEventListener(type,callback,false);
} else if(ele.attachEvent){
ele.attachEvent("on"+type,callback);
} else {
ele["on"+type] = callback;
}
}
//使用
addEvent(obox,"click",function(){
console.log(1);
})
(5)有时候本地调试的时候,比如打开的文件在浏览器开头为 file://
浏览器也会默认为跨域页面,这时候只需要自己搭建一个服务器环境(phpnow
之类的都可以),就可以了;
(5)jquery 写 onload 事件的写法:
$("#iframe").load(function(){//...
})
(6)可参考资料:iframe 动态onload事件处理方式
(7)其他:图片onload事件详解,兼容所有浏览器!
二、关于高度
如何获取没有给出高度的元素的高度?
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
三、试验历程
1. 参考 怎么让iframe的高度和宽度可以100%
<iframe name="right" id="center_cent" src="center/center0.html" width="100%" frameborder="0" onload='this.style.height=Math.max(this.contentWindow.document.body.scrollHeight,this.contentWindow.document.documentElement.scrollHeight,200)+"px"; '>
</iframe>
这里 onload 中写的是 this.style.height
,有的是直接写this.height
,二者的区别是,前面是给 iframe
添加 css 样式,把 height
作为 css 中的属性。后者是把 height
当做 iframe
标签 中的内置可见属性,
一开始参考这里面的代码,发现有个问题:
当iframe 中有异步操作时,高度获取有时候不准确,不是子页面的实际高度;当网速较慢时,高度几乎都能计算出并获取子页面的高度。
2. 参考iframe嵌套界面自适应,可高度自由收缩
之后参考了这个博主的文章,但是还是会碰到上面的问题,只是会给页面一个固定高度,当我子页面的高度>这个固定高度时,子页面多出的部分会被隐藏掉。
<script>// 计算页面的实际高度,iframe自适应会用到function calcPageHeight(doc) {var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)var height = Math.max(cHeight, sHeight)return height}//根据ID获取iframe对象var ifr = document.getElementById('iframe-box');ifr.onload = function() {//解决打开高度太高的页面后再打开高度较小页面滚动条不收缩ifr.style.height='0px';var iDoc = ifr.contentDocument || ifr.documentvar height = calcPageHeight(iDoc)if(height < 850){height = 850;}ifr.style.height = height + 'px'}
</script>
3. 解决首次弹出层iframe框架时,iframe框架所调用的页面高度和宽度取不到的问题
然后发现了这篇文章,上面问题导致的原因,可能是获取高度和iframe加载的顺序上面不对,通用延时函数setTimeout来调整执行顺序即可解决。
$(function () {setTimeout(function () {//在这里就可以获取到页面元素高度}, 0);
});