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函数
Sep 08 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
javascript实现类似超链接的效果
Dec 26 Javascript
js使用心得分享
Jan 13 Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
Three.js基础学习教程
Nov 16 Javascript
JavaScript 中的 this 工作原理
Jun 20 Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 Javascript
简单了解JavaScript sort方法
Nov 25 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 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
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
jquery 3D球状导航的文章分类
2010/07/06 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
一组SQL面试题
2016/02/15 面试题
教师党员一句话承诺
2014/03/28 职场文书
关于安全的标语
2014/06/10 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
2015大学生实训报告
2014/11/05 职场文书
2014年文员工作总结
2014/11/18 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
2014年度工作总结报告
2014/12/15 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
openstack中的rpc远程调用的方法
2021/07/09 Python
使用Python拟合函数曲线
2022/04/14 Python
Django框架中表单的用法
2022/06/10 Python
Spring Boot实现文件上传下载
2022/08/14 Java/Android