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 相关文章推荐
js停止输出代码
Jul 20 Javascript
用tip解决Ext列宽度不够的问题
Dec 13 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
js+div+css下拉导航菜单完整代码分享
Dec 28 Javascript
JS数组交集、并集、差集的示例代码
Aug 23 Javascript
基于打包工具Webpack进行项目开发实例
May 29 Javascript
用vscode开发vue应用的方法步骤
May 06 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
vue 组件内获取actions的response方式
Nov 08 Javascript
前端如何实现动画过渡效果
Feb 05 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/08/08 PHP
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
jQuery 相关控件的事件操作分解
2009/08/03 Javascript
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
Python中线程编程之threading模块的使用详解
2015/06/23 Python
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
Python连接phoenix的方法示例
2017/09/29 Python
微信跳一跳python代码实现
2018/01/05 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
AJAX都有哪些有点和缺点
2012/11/03 面试题
自我评价的正确写法
2013/09/19 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
实例讲解Python中sys.argv[]的用法
2021/06/03 Python
浅谈JS的原型和原型链
2021/06/04 Javascript