Javascript实现获取窗口的大小和位置代码分享


Posted in Javascript onDecember 04, 2014

在Javascript中可以使用OuterWidth,OuterHeight 获取浏览器的大小.用 innerWidth,innerHeight 来获取窗口的大小(除去浏览器边框部分)。对于IE6 及之前版本,要区分是标准模式,还是混杂模式。标准模式使用document.documentElement.clientWidth,document.documentElement.clientHeight;混杂模式使用document.body 的clientWidth,clientHeight。

     (function () {

         var pageWidth = window.innerWidth;

         var pageHeight = window.innerHeight;

         var broswerWidth = window.outerWidth;

         var broswerHeight = window.outerHeight;

         alert(pageWidth + " " + pageHeight);

         alert(broswerWidth + " " + broswerHeight);

         if (typeof pageWidth != "number") {

             if (document.compatMode == "CSS1Compat") {  //The standard mode

                 pageWidth = document.documentElement.clientWidth;

                 pageHeight = document.documentElement.clientHeight;

             } else {

                 pageWidth = document.body.clientWidth;

                 pageHeight = document.body.clientHeight;

             }

         }  

     })();

Javascript实现获取窗口的大小和位置代码分享

获取窗口的位置:IE,chrome,Safari,使用screenLeft,screenTop 来获取窗口距离屏幕左边和屏幕上边的位置。而Firefox不支持此属性,Firefox使用screenXP,screenY 达到同样的效果。

    (function btnFun() {

        var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft :

            window.screenX;

        var topPos = (typeof window.screenTop == "number") ? window.screenTop :

                         window.screenY;

        alert(leftPos + " " + topPos);

        //alert(window.screenLeft+" "+window.screenTop);

    })();
Javascript 相关文章推荐
网页上的Javascript编辑器和代码格式化
Apr 25 Javascript
JavaScript通过RegExp实现客户端验证处理程序
May 07 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
解决linux下node.js全局模块找不到的问题
May 15 Javascript
vue模式history下在iis中配置流程
Apr 17 Javascript
前端深入理解Typescript泛型概念
Mar 09 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 #Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 #Javascript
jquery实现动态画圆
Dec 04 #Javascript
javascript数组遍历for与for in区别详解
Dec 04 #Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 #Javascript
express的中间件cookieParser详解
Dec 04 #Javascript
express的中间件bodyParser详解
Dec 04 #Javascript
You might like
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
一个php作的文本留言本的例子(四)
2006/10/09 PHP
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
jquery怎样实现ajax联动框(一)
2013/03/08 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
Python中函数的用法实例教程
2014/09/08 Python
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
用python实现的线程池实例代码
2018/01/06 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
python requests指定出口ip的例子
2019/07/25 Python
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
国际花店:Pickup Flowers
2020/04/10 全球购物
电气工程和自动化自荐信范文
2013/12/25 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
六年级作文之预言作文
2019/10/25 职场文书