取得窗口大小 兼容所有浏览器的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 相关文章推荐
使用jQuery轻松实现Ajax的实例代码
Aug 16 Javascript
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
jQuery之选项卡的简单实现
Feb 28 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 Javascript
Html中 IFrame的用法及注意点
Dec 22 Javascript
react系列从零开始_简单谈谈react
Jul 06 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 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 fsockopen解决办法 php实现多线程
2014/01/20 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
php cli配置文件问题分析
2015/10/15 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
一个用js实现控制台控件的代码
2007/09/04 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
JavaScript中运算符规则和隐式类型转换示例详解
2017/09/06 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
轻松解决JavaScript定时器越走越快的问题
2019/05/13 Javascript
使用python解析xml成对应的html示例分享
2014/04/02 Python
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
通过Python实现自动填写调查问卷
2017/09/06 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
python numpy 按行归一化的实例
2019/01/21 Python
Python常见的pandas用法demo示例
2019/03/16 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
Python中flatten( ),matrix.A用法说明
2020/07/05 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
python如何提升爬虫效率
2020/09/27 Python
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
门诊挂号室室长岗位职责
2013/11/27 职场文书
三八妇女节活动总结
2014/05/04 职场文书
预备党员综合考察材料
2014/05/31 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
python 爬取华为应用市场评论
2021/05/29 Python