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 !!的作用
Dec 04 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
YUI模块开发原理详解
Nov 18 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
JS实现黑色大气的二级导航菜单效果
Sep 18 Javascript
JQuery validate插件验证用户注册信息
May 11 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 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支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
php 操作符与控制结构
2012/03/07 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
JavaScript打字小游戏代码
2011/12/26 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
利用Python批量生成任意尺寸的图片
2016/08/29 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
Python实现随机创建电话号码的方法示例
2018/12/07 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
Python matplotlib学习笔记之坐标轴范围
2019/06/28 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
Python with标签使用方法解析
2020/01/17 Python
python3 实现口罩抽签的功能
2020/03/11 Python
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
建筑专业自荐信
2013/10/18 职场文书
酒店管理毕业生自荐信
2013/10/24 职场文书
党风廉设责任书
2014/04/16 职场文书
区级文明单位申报材料
2014/05/15 职场文书
健康教育主题班会
2015/08/14 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
Elasticsearch 索引操作和增删改查
2022/04/19 Python