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创建命名空间(namespace)的最简实现
Dec 11 Javascript
jQuery 自动增长的文本输入框实现代码
Apr 02 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
微信小程序基于高德地图查找位置并显示文字
Oct 30 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 Javascript
Vuex实现简单购物车
Jan 10 Vue.js
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中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
JS原型对象通俗"唱法"
2012/12/27 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
原生js中ajax访问的实例详解
2017/09/19 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
python使用Tkinter显示网络图片的方法
2015/04/24 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
python 默认参数相关知识详解
2019/09/18 Python
Python如何读取文件中图片格式
2020/01/13 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
美国休闲服装品牌:Express
2016/09/24 全球购物
党校培训思想汇报
2014/01/03 职场文书
客户接待方案
2014/02/26 职场文书
2014年学习雷锋活动总结
2014/03/01 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
教师个人读书活动总结
2014/07/08 职场文书
旷课检讨书范文
2014/10/30 职场文书
考研复习计划
2015/01/19 职场文书
校本研修个人总结
2015/02/28 职场文书
生日宴会家属答谢词
2015/09/29 职场文书