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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
jquery 删除字符串最后一个字符的方法解析
Feb 11 Javascript
JavaScript DOM节点添加示例
Jul 16 Javascript
jQuery动画与特效详解
Feb 01 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 Javascript
mpvue 如何使用腾讯视频插件的方法
Jul 16 Javascript
Vue学习之组件用法实例详解
Jan 06 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/07/02 PHP
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
laravel利用中间件防止未登录用户直接访问后台的方法
2019/09/30 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
纯javascript版日历控件
2016/11/24 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
react-native 完整实现登录功能的示例代码
2017/09/11 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
深入理解Django的自定义过滤器
2017/10/17 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
如何用python批量调整视频声音
2020/12/22 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
Intersport西班牙:在线体育商店
2019/11/06 全球购物
一套软件测试笔试题
2014/07/25 面试题
餐饮业员工工作决心书
2014/03/11 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
精神文明单位申报材料
2014/05/02 职场文书
关于颐和园的导游词
2015/01/30 职场文书
中学生逃课检讨书
2015/02/17 职场文书
张思德观后感
2015/06/09 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript