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 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
jQuery toggle()设置CSS样式
Nov 05 Javascript
jquery获取input表单值的代码
Apr 19 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
基于Javascript倒计时效果
Dec 22 Javascript
微信小程序 POST请求的实例详解
Sep 29 Javascript
使用axios实现上传图片进度条功能
Dec 21 Javascript
解决vue热替换失效的根本原因
Sep 19 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
JS实现使用POST方式发送请求
Aug 30 Javascript
小程序实现tab标签页
Nov 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
PHP 日志缩略名的创建函数代码
2010/05/26 PHP
深入探讨PHP中的内存管理问题
2011/08/31 PHP
php文件操作实例代码
2012/05/10 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
2020/06/04 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
Python CSV模块使用实例
2015/04/09 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
python解包用法详解
2021/02/17 Python
倩碧香港官方网站:Clinique香港
2017/11/13 全球购物
Jdbc数据访问技术面试题
2012/03/30 面试题
高中体育教学反思
2014/01/24 职场文书
关于安全的标语
2014/06/10 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
红色革命电影观后感
2015/06/18 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android