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 相关文章推荐
jquery的ajax请求全面了解
Mar 20 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
uni-app如何实现增量更新功能
Jan 03 Javascript
浅谈JavaScript节流和防抖函数
Aug 25 Javascript
vue2.0 watch里面的 deep和immediate用法说明
Oct 30 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.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
php 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python random模块常用方法
2014/11/03 Python
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
Python读大数据txt
2016/03/28 Python
简单谈谈Python中的反转字符串问题
2016/10/24 Python
python3实现字符串操作的实例代码
2019/04/16 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
Python with语句用法原理详解
2020/07/03 Python
Eclipse面试题
2014/03/22 面试题
乡镇办公室工作决心书
2014/03/11 职场文书
乔迁之喜主持词
2014/03/27 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
大型演出策划方案
2014/05/28 职场文书
讲党性心得体会
2014/09/03 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
作风建设年活动实施方案
2014/10/24 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
求职信格式范文
2015/03/19 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
小学生读书笔记范文
2015/06/30 职场文书
go类型转换及与C的类型转换方式
2021/05/05 Golang
如何通过cmd 连接阿里云服务器
2022/04/18 Servers