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 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
webpack配置sass模块的加载的方法
Jul 30 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
详解微信小程序调起键盘性能优化
Jul 24 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
vue3.0生命周期的示例代码
Sep 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
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
PHPMyAdmin 快速配置方法
2009/05/11 PHP
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
php实现多城市切换特效
2015/08/09 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
深入认识JavaScript中的函数
2007/01/22 Javascript
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
js确定对象类型方法
2012/03/30 Javascript
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
2015/04/12 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
2018/03/13 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
Vuejs+vue-router打包+Nginx配置的实例
2018/09/20 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
Python实现的HTTP并发测试完整示例
2020/04/23 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
python的常用模块之collections模块详解
2018/12/06 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
PHP面试题附答案
2015/11/28 面试题
贷款委托书范本
2014/04/08 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
2014年团支部工作总结
2014/11/17 职场文书
2016年寒假家长评语
2015/10/10 职场文书
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android