取得窗口大小 兼容所有浏览器的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 相关文章推荐
javascript网页关闭时提醒效果脚本
Oct 22 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 Javascript
javascript 获取函数形参个数
Jul 31 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
angularjs 缓存的使用详解
Mar 19 Javascript
vue.js中实现登录控制的方法示例
Apr 23 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 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
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
2020/07/31 Javascript
python实现AES加密和解密
2019/03/27 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
python 列表推导式使用详解
2019/08/29 Python
python求质数列表的例子
2019/11/24 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
一套比较完整的软件测试人员面试题
2012/05/13 面试题
2014年勤工助学工作总结
2014/11/24 职场文书
党支部先进事迹材料
2014/12/24 职场文书
承诺函格式模板
2015/01/21 职场文书
预备党员群众意见
2015/06/01 职场文书
党员转正大会主持词
2015/07/02 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
python三子棋游戏
2022/05/04 Python
Java数据结构之堆(优先队列)
2022/05/20 Java/Android