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去除空格的几种方法
Oct 03 Javascript
Three.js源码阅读笔记(Object3D类)
Dec 27 Javascript
JavaScript获取路径设计源码
May 22 Javascript
JavaScript实现twitter puddles算法实例
Dec 06 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
详解vue数据渲染出现闪烁问题
Jun 29 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 Javascript
js设置鼠标悬停改变背景色实现详解
Jun 26 Javascript
JavaScript实现简单验证码
Aug 24 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的5个入手程序
2006/11/23 PHP
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
PHP count()函数讲解
2019/02/03 PHP
超级强大的表单验证
2006/06/26 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
使用Node.js配合Nginx实现高负载网络
2015/06/28 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
[00:14]护身甲盾
2019/03/06 DOTA
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
python3 读写文件换行符的方法
2018/04/09 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
python开发入门——set的使用
2020/09/03 Python
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
英国电信商店:BT Shop
2019/12/17 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
口腔医学技术应届生求职信
2013/11/09 职场文书
市场部管理制度
2014/02/02 职场文书
党支部承诺书范文
2014/03/28 职场文书
投资合作协议书范本
2014/04/17 职场文书
一年级小学生评语
2014/04/22 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
实习班主任自我评价
2015/03/11 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python