取得窗口大小 兼容所有浏览器的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中的数学函数集合
May 08 Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
JavaScript面向对象编程入门教程
Apr 16 Javascript
JsRender for object语法简介
Oct 31 Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
Vue v2.4中新增的$attrs及$listeners属性使用教程
Jan 08 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
vue.js实现三级菜单效果
Oct 19 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
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操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
基于php socket(fsockopen)的应用实例分析
2013/06/02 PHP
php 创建以UNIX时间戳命名的文件夹(示例代码)
2014/03/08 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
Laravel find in set排序实例
2019/10/09 PHP
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
Python简单实现安全开关文件的两种方式
2016/09/19 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
机器学习python实战之决策树
2017/11/01 Python
python三大神器之fabric使用教程
2019/06/10 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
AOP的定义以及作用
2013/09/08 面试题
工商管理专业学生的自我评价
2013/10/01 职场文书
酒店销售经理岗位职责
2014/01/31 职场文书
党校学习自我鉴定
2014/02/24 职场文书