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文件
Aug 25 Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
Nov 30 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 Javascript
JavaScript通过filereader接口读取文件
May 10 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 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
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
PHP中header和session_start前不能有输出原因分析
2013/01/11 PHP
php导出生成word的方法
2015/12/25 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
php获取excel文件数据
2017/04/21 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
Javascript Tab 导航插件 (23个)
2009/06/11 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
react 应用多入口配置及实践总结
2018/10/17 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
python实现linux下抓包并存库功能
2018/07/18 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
Python制作词云图代码实例
2019/09/09 Python
Python中logger日志模块详解
2020/08/04 Python
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
初中数学教学反思
2014/01/16 职场文书
党员教师工作决心书
2014/03/13 职场文书
学校创先争优活动总结
2014/08/28 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技