• JavaScript高级程序设计window对象学习记录


    一.窗口位置

      1.浏览器中获得窗口距屏幕左右边界位置差异

        1).在ie。chrome、safari、opera中,通过screenTop/screentLeft获得窗口相对屏幕左边和上边的位置,

        2)但在firefox中没有这两个属性,需要使用screenX/screenY两个属性获得;

      ps: 虽然opera中既支持screenTop/screenLeft, 又支持screenX/screenY属性,但是属性对应的值却不相同。

        并且在IE和opera中,screenTop/screenLeft保存的是从屏幕左边和上边到window对象表示的页面的可见区域的距离,也就是说,当window对象是最外层,而且浏览器窗口紧贴屏幕最上端,即y轴坐标为0,那莫screenTop返回的是浏览器上工具栏的高度。但在chrome、firefox、safari中,screenTop中保存的是整个浏览器相对于屏幕的坐标值,当满足上述情况的是时候,screenTop返回的是0.

      moveTo(x,y)移动到(x,y)坐标位置

      moveBy(0, 100)在水平或垂直方向移动的像素数

    二.窗口大小

      1.ie9+、firefox、safari、opera、chrome都提供了四个属性:innerwidth、innerheight、outerWidth、outerHeight

      2.差异:在IE9+、safari、firefox中,outerWidth与outerHeight返回浏览器窗口本身的大小。

          在opera中,outerWidth与outerHeight返回单个标签页对应的浏览器窗口大小, innnerWidth/innerHeight则表示该容器中页面视图大小。

          在chrome中outerWidth、outerHeight、innerHeight、innerWidth都返回相同的大小,即视口(viewport)的大小。

      3.可通过DOM提供的方法获取窗口的大小

        document.documentElement.clientWidth 和 document.documentElement.clientHeight获取视口(viewport)的大小

        在ie6中,以上的方法在标准模式下才会生效,如果是混杂模式,则需使用document.body.clientWidth和document.body.clientHeight方式获得视口大小,而在混在模式下的chrome,以上两种方式都可取到视口的大小。

        可通过如下方式获取当前视口大小:

        var pageWidth = window.innerWidth;

        var pageHeight = window.innerHeight;

        if (typeof pageWidth !== 'number') {

          if (document.compatMode == 'CSS1Compat'){ // document.compatMode 为判断页面是否处于标准模式

            pageWidth = document.documentElement.clientWidth;

            pageHeight = document.docuemntElement.clientHeight;

          } else {

            pageWidth = document.body.clientWidth;

            pageHeight = document.body.clientHeight;

          }

        }

    三.导航和打开窗口

      1.window.open(要加载的url, 窗口目标, 一个特性字符串, 一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值)// 通常只传第一个参数,最后一个参数只在不打开浏览器新窗口的情况下使用。

  • 相关阅读:
    2017干货分享丨全球100款大数据工具汇总(附图)
    Hbase与Oracle比较(列式数据库与行式数据库)
    HBase底层存储原理
    关系数据库_关系代数的并行计算_数据库分类
    HBase与列存储
    ZooKeeper分布式过程协同技术详解2——了解ZooKeeper
    ZooKeeper分布式过程协同技术详解1——ZooKeeper的概念和基础
    facebook api之基本概念(中文)
    facebook api之Access Tokens之Business Manager System User
    facebook api之Access Tokens
  • 原文地址:https://www.cnblogs.com/lzj0824/p/8870240.html
Copyright © 2020-2023  润新知