脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Javascript实现获取窗口的大小和位置代码分享

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 find 方法不支持IE的问题

    浅谈JavaScript find 方法不支持IE的问题

    下面小编就为大家带来一篇浅谈JavaScript find 方法不支持IE的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JS+Canvas绘制抽奖转盘

    JS+Canvas绘制抽奖转盘

    这篇文章主要为大家详细介绍了JS+Canvas绘制抽奖转盘，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • JS端基于download.js实现图片、视频时直接下载而不是打开预览

    JS端基于download.js实现图片、视频时直接下载而不是打开预览

    这篇文章主要介绍了JS端基于download.js实现图片、视频时直接下载而不是打开预览,需要的朋友可以参考下
    2020-05-05
  • vue中npm包全局安装和局部安装过程

    vue中npm包全局安装和局部安装过程

    这篇文章主要介绍了npm包全局安装和局部安装过程，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-09-09
  • js获取微信版本号的方法

    js获取微信版本号的方法

    本文给大家分享的是使用javascript实现判断微信版本号以及判断是否在内置的微信浏览器中打开的代码，十分的简单实用，有需要的小伙伴可以参考下。
    2015-05-05
  • Immutable 在 JavaScript 中的应用

    Immutable 在 JavaScript 中的应用

    在 JavaScript 中，对象是引用类型的数据，其优点在于频繁的修改对象时都是在原对象的基础上修改，并不需要重新创建，这样可以有效的利用内存，不会造成内存空间的浪费，对象的这种特性可以称之为 Mutable，中文的字面意思是「可变」
    2016-05-05
  • JavaScript 上传文件限制参数案例详解

    JavaScript 上传文件限制参数案例详解

    这篇文章主要介绍了JavaScript 上传文件限制参数案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • javascript中定义变量const和var有什么区别详解

    javascript中定义变量const和var有什么区别详解

    这篇文章主要给大家介绍了关于javascript中定义变量const和var有什么区别的相关资料,在JavaScript中var和const都是用于声明变量的关键字,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • JavaScript属性操作

    JavaScript属性操作

    这篇文章介绍了JavaScript属性的操作，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-03-03
  • Bootstrap前端开发案例二

    Bootstrap前端开发案例二

    Bootstrap前端开发案例二，这篇文章能够帮助大家更还好的进行前端开发Bootstrap，相信大家会爱上Bootstrap
    2016-06-06

最新评论