取得窗口大小 兼容所有浏览器的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 相关文章推荐
简单三步,搞掂内存泄漏
Mar 10 Javascript
javascript延时重复执行函数 lLoopRun.js
Jun 29 Javascript
javascript demo 基本技巧
Dec 18 Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
jQuery.form插件的使用及跨域异步上传文件
Apr 27 Javascript
Bootstrap表格制作代码
Mar 17 Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 28 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中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
Python----数据预处理代码实例
2019/03/20 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
餐厅考勤管理制度
2014/01/28 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
小学生综合素质评语
2014/04/23 职场文书
社会稳定风险评估方案
2014/06/02 职场文书
食品安全标语
2014/06/07 职场文书
学校安全责任书范本
2014/07/23 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
项目负责人岗位职责
2015/02/15 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏