Javascript实现获取窗口的大小和位置代码分享

更新时间：2014年12月04日 15:36:38 投稿：hebedich

这篇文章主要分享了一段Javascript实现获取窗口的大小和位置代码，兼容性非常好，这里推荐给大家

在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;

             }

         }  

     })();

获取窗口的位置：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数据结构之二叉查找树的定义与表示方法,简单讲述了二叉查找树的概念、特点及javascript针对二叉查找树的创建、插入、遍历等操作相关实现技巧,需要的朋友可以参考下
2017-04-04
js对字符串和数字进行加法运算的一些情况
这篇文章主要介绍了js对字符串和数字进行加法运算的一些情况,需要的朋友可以参考下
2023-02-02
微信小程序获取用户手机号码详细教程(前端＋后端)
在我们开发微信小程序时,获取用户手机号码是常见的需求之一,这篇文章主要给大家介绍了关于微信小程序获取用户手机号码的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
2024-02-02
bootstrap组件之导航组件使用方法
Bootstrap 中的导航组件都依赖同一个 .nav 类和ul，状态类也是共用的。改变修饰类可以改变样式。接下来通过本文给大家介绍bootstrap 导航组件使用方法，一起看看吧
2017-01-01
用js将内容复制到剪贴板兼容浏览器
通过js将内容复制到剪贴板，本来不难，可是若考虑到浏览器的兼容性问题，就变的有点麻烦，借助flash实现浏览器的兼容
2014-03-03
Javascript函数技巧学习
这篇文章主要介绍了Javascript函数技巧学习，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下
2022-07-07
JS自动适应的图片弹窗实例
这篇文章介绍了JS自动适应的图片弹窗实例代码，有需要的朋友可以参考一下
2013-06-06
JavaScript常用数组算法小结
在开发项目的过程中，我们经常会需要关于javascript数组的一些算法，比方说数组去重、数组求交集、数组扰乱等等。今天就把个人的汇总整理的算法分享给大家。
2016-02-02
使用uni-app开发微信小程序的实现
这篇文章主要介绍了使用uni-app开发微信小程序的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12
微信小程序实现简单Tab切换效果
这篇文章主要为大家详细介绍了微信小程序实现简单Tab切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-05-05