zoukankan      html  css  js  c++  java
  • Javascript 获取窗口的大小和位置

    在Javascript中可以使用OuterWidth,OuterHeight 获取浏览器的大小.用 innerWidth,innerHeight 来获取窗口的大小(除去浏览器边框部分)。对于IE6 及之前版本,要区分是标准模式,还是混杂模式。标准模式使用document.documentElement.clientWidth,document.documentElement.clientHeight;混杂模式使用document.body 的clientWidth,clientHeight。

     1     (function () {
     2         var pageWidth = window.innerWidth;
     3         var pageHeight = window.innerHeight;
     4 
     5         var broswerWidth = window.outerWidth;
     6         var broswerHeight = window.outerHeight;
     7         alert(pageWidth + " " + pageHeight);
     8         alert(broswerWidth + " " + broswerHeight);
     9         if (typeof pageWidth != "number") {
    10             if (document.compatMode == "CSS1Compat") {  //The standard mode
    11                 pageWidth = document.documentElement.clientWidth;
    12                 pageHeight = document.documentElement.clientHeight;
    13             } else {
    14                 pageWidth = document.body.clientWidth;
    15                 pageHeight = document.body.clientHeight;
    16             }
    17         }
    18         
    19     })();
    get broswer and page size

     

    获取窗口的位置:IE,chrome,Safari,使用screenLeft,screenTop 来获取窗口距离屏幕左边和屏幕上边的位置。而Firefox不支持此属性,Firefox使用screenXP,screenY 达到同样的效果。

    1     (function btnFun() {
    2         var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft :
    3             window.screenX;
    4         var topPos = (typeof window.screenTop == "number") ? window.screenTop :
    5                          window.screenY;
    6         alert(leftPos + " " + topPos);
    7         //alert(window.screenLeft+" "+window.screenTop);
    8     })();
    get window position
  • 相关阅读:
    csu 1503: 点弧之间的距离-湖南省第十届大学生计算机程序设计大赛
    Android MediaPlayer 和 NativePlayer 播放格式控制
    国内互联网企业奇妙招数
    [Oracle] Insert All神奇
    代码杂记
    R.layout.main connot be resolved 和R.java消失
    计算机安全篇(1)
    深入浅出谈开窗函数(一)
    PHP JSON_ENCODE 不转义中文汉字的方法
    c#indexof使用方法
  • 原文地址:https://www.cnblogs.com/bg57/p/4127195.html
Copyright © 2011-2022 走看看