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中Eval函数的使用说明
Oct 11 Javascript
Jquery iframe内部出滚动条
Feb 11 Javascript
基于jQuery的实现简单的分页控件
Oct 10 Javascript
input:checkbox多选框实现单选效果跟radio一样
Jun 16 Javascript
详解Javascript动态操作CSS
Dec 08 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
js获取Get值的方法
Sep 29 Javascript
JavaScript实现购物车基本功能
Jul 21 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 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
PHP 采集程序原理分析篇
2010/03/05 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
详解json在php中的应用
2018/09/30 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
封装的原生javascript弹出层代码
2010/09/24 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
js事件驱动机制 浏览器兼容处理方法
2016/07/23 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
JS中IP地址与整数相互转换的实现代码
2017/04/10 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
MVVM框架下实现分页功能示例
2018/06/14 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
python调用windows api锁定计算机示例
2014/04/17 Python
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
四种会话跟踪技术
2015/05/20 面试题
2014年志愿者工作总结
2014/11/20 职场文书
管理失职检讨书范文
2015/05/05 职场文书
贫困证明怎么写
2015/06/16 职场文书
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript