取得窗口大小 兼容所有浏览器的js代码


Posted in Javascript onAugust 09, 2011

取得窗口大小的代码:

var pageWidth = window.innerWidth, 
var pageHeight = window.innerHeight; 
if(typeof pageWidth != "number"){ 
if(document.compatMode == "number"){ 
pageWidth = document.documentElement.clientWidth; 
pageHeight = document.documentElement.clientHeight; 
}else{ 
pageWidth = document.body.clientWidth; 
pageHeight = document.body.clientHeight; 
} 
}

我们首先把window.innerWidth和window.innerHeight的值分别付给了pageWidth和pageHeight。然后检查pageWidth中保存的是不是一个数值;如果不是,则通过document.compatMode来确定页面是否处于标准模式。如果是,则分别使用document.documentElement.clientWidth和document.documentElement.clientHeight的值。否则,就使用document.body.clientWidth和document.body.clientHeight的值。
取得窗口位置的代码:
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX; 
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
 
这两个例子目的是取得窗口左边和上边的位置,首先运用二元操作符判断screenLeft属性和screenTops属性是否存在,如果存在(在IE、Safari、Opera和Chrome中),则取这两个属性的值。如果不存在(在Firefox中),则取screenX和screenY的值。
Javascript 相关文章推荐
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
自定义jQuery选项卡插件实例
Mar 27 Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
使用Vue构建可重用的分页组件
Mar 26 Javascript
vue写一个组件
Apr 09 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
Apr 21 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
node.js 微信开发之定时获取access_token
Feb 07 Javascript
Vue如何实现变量表达式选择器
Feb 18 Vue.js
JavaScript实现贪吃蛇游戏
Jun 16 Javascript
Javascript实现的类似Google的Div拖动效果代码
Aug 09 #Javascript
基于Jquery的文字自动截取(提供源代码)
Aug 09 #Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 #Javascript
用JS判断IE版本的代码 超管用!
Aug 09 #Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
Aug 09 #Javascript
js 分页全选或反选标识实现代码
Aug 09 #Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 #Javascript
You might like
那些年一起学习的PHP(一)
2012/03/21 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
Jquery attr("checked") 返回checked或undefined 获取选中失效
2013/10/10 Javascript
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
Python 面向对象 成员的访问约束
2008/12/23 Python
python在控制台输出进度条的方法
2015/06/20 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
python程序变成软件的实操方法
2019/06/24 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
外贸公司实习自我鉴定
2013/09/24 职场文书
成人教育自我鉴定
2013/11/01 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
行政人事专员岗位职责
2014/03/05 职场文书
期末评语大全
2014/05/04 职场文书
春季防火方案
2014/05/10 职场文书
执行力心得体会范文
2016/01/11 职场文书