大网站怎样选域名,ui设计的就业前景,项目建设环境影响登记表在哪个网站,做注塑机的网站标题描述一、解决方法解决代码二、关于高度问题简单讲一下jquery中的 height()#xff0c;innerHeight()、outHeight()#xff0c;js中的offsetHeight、clientHeight、scrollHeight。如何获取没有给出高度的元素的高度#xff1f;详细介绍offsetHeight,clientHeight,scrollH…标题描述一、解决方法解决代码二、关于高度问题简单讲一下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.height0px;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;}
})();注意 1iframe 是双标签需要结尾iframe/iframe 2iframe 标签中的 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(ontype,callback);
} else {
ele[ontype] callback;
}
}
//使用
addEvent(obox,click,function(){
console.log(1);
})5有时候本地调试的时候比如打开的文件在浏览器开头为 file:// 浏览器也会默认为跨域页面这时候只需要自己搭建一个服务器环境phpnow之类的都可以就可以了 5jquery 写 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 nameright idcenter_cent srccenter/center0.html width100% frameborder0 onloadthis.style.heightMath.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.height0px;var iDoc ifr.contentDocument || ifr.documentvar height calcPageHeight(iDoc)if(height 850){height 850;}ifr.style.height height px}
/script3. 解决首次弹出层iframe框架时iframe框架所调用的页面高度和宽度取不到的问题
然后发现了这篇文章上面问题导致的原因可能是获取高度和iframe加载的顺序上面不对通用延时函数setTimeout来调整执行顺序即可解决。 $(function () {setTimeout(function () {//在这里就可以获取到页面元素高度}, 0);
});
