• JavaScript高级程序设计16.pdf


    第8章 BOM

    BOM的核心对象就是window,它表示浏览器的一个实例,在浏览器中window对象有双重角色,它既是JavaScript访问浏览器的一个接口,又是规定的Global对象,因此所有在全局作用域中声明变量、函数都会是window对象的属性和方法

    定义全局变量与在window对象上直接定义属性的差别是全局变量不能通过delete操作符删除,而直接在window对象上定义的属性可以
    尝试访问未声明的变量会抛出错误,但通过查询window对象,可以知道某个可能未声明的变量是否存在

    如果页面中包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中,可以通过数值索引(从0开始,从左到右,从上到下)或者框架名称来访问相应的window对象,每个window对象都有一个name对象,包含框架的名称

    top对象始终指向最高(最外)层的框架,也就是浏览器窗口

    parent对象始终指向当前框架的直接上层,在没有框架的情况下,parent等于top等于window

    window.frames[0]

    window.frames["topFrame"]

    top.frames[0]

    top.frames["topFrame"]

    frames[0]

    frames["topFrame"]

    与框架有关的最有一个对象是self,它始终指向window,它们可以互换使用,引入它的目的只是为了与top parent对象有个对应

    窗口位置
    用来确定和修改窗口位置

    IE、Safari、Opera和Chrome提供screenLeft和ScreenTop属性,表示窗口相对与屏幕左边和上边的位置

    FireFox则是使用screenX和screenY

    跨浏览器取得窗口位置

    var leftPos=(typeof window.screenLeft=="number") ? window.screenLeft : window.screenX;

    var topPos=(typeof window.screenTop=="number") ? window.screenTop : window.screenY;

    由于各浏览器厂商对窗口位置的定义不同,在跨浏览器条件下无法取得窗口左边和上边的精确位置,可以使用moveTo()和moveBy()将窗口移动到一个新的位置
    它们都接收2个参数moveTo()接收新位置的X和Y坐标值,moveBy()接收在水平和垂直方向上移动的像素数

    注意:这两个方法可能会被浏览器禁用,另外它们不适用框架,只能对最外层的window对象使用

    窗口大小

    跨浏览器确定窗口大小不是一件简单的事情

    IE9+、Firefox、Safari、Opera和Chrome为此提供了4个属性:innerWidth、innerHeight、outerWidth和outerHeight

    IE9+、Safari和Firefox中outerWidth和outerHeight返回浏览器窗口本身的尺寸

    Opera中outerWidth和outerHeight表示页面视图容器(单个标签页对应的浏览器窗口)的大小,而innerWidth和innerHeight表示页面视图区的大小(减去边框宽度)

    在Chrome中innerWidth、innerHeight、outerWidth和outerHeight返回相同的值,即视口的大小而非浏览器窗口大小

    在IE、Firefox、Safari、Opera和Chrome中,document.documentElement.clientWidth和document.documentElement.clientHeight保存了页面的视口信息,在IE6中,这些属性必须在标准模式下才有效,如果是混杂模式就必须通过document.body.clientWidth和document.body.clientHeight取得相同的信息,混杂模式下的Chrome对于以上两种方法都可以取得视口大小,虽然无法确定浏览器本身的大小,但却可以取得页面视口的大小

    var pageWidth=window.innerWidth,

      pageHeight=window.innerHeight;

    if (typeof pageWidth !="number"){

      if (document.compatMode == "CSS1Compat"){

          pageWidth=document.documentElement.clientWidth;

          pageHeight=document.documentElement.clientHeight;

          }

      else{

          pageWidth=document.body.clientWidth;

          pageHeight=document.body.clientHeight;

          }

        }

    resizeTo()和resizeBy()方法可以调整浏览器窗口的大小,都接收2个参数,它们与移动窗口位置的方法类似,也可能被浏览器禁用,在Opera和IE7+默认就是禁用的,并且同样不适用与框架,只对最外层window对象使用

  • 相关阅读:
    windows安全实验
    ping 命令的禁止 以及密码的攻破
    网络基础
    html 中间件
    js php BurpSuite v2.1
    网页标签,PHPstudy
    说说text_line_orientation算子的巧妙应用
    说说C#进行数字图像处理的方法
    微信张小龙产品30条
    说说几个常用的阈值分割算子
  • 原文地址:https://www.cnblogs.com/sdgjytu/p/3734073.html
Copyright © 2020-2023  润新知