• JavaScript高级程序设计(读书笔记)之BOM


    BOM(Browser Object Model)提供了很多对象用于访问浏览器的功能,这些功能与任何网页内容无关。

    8.1 window对象
    BOM的核心对象是window,它表示一个浏览器实例。在浏览器中,window对象有双重角色,window对象既是JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。

    8.1.1 全局作用域
    所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。

    全局变量不能通过delete操作符删除,而直接在window对象上定义的属性可以。

    尝试访问未声明的变量会抛出错误,但是通过查询window对象可以知道某个可能未声明的变量是否存在。

    8.1.2 窗口关系及框架
    网页中每个框架都有自己独立的window对象,并保存在frames集合中,通过基于0的索引,从做左到右,从上到下或者框架名称访问相应的window对象,window.name是框架名称。

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

    parent对象指向当前框架的直接上层框架。

    self对象始终指向window,可以互换使用。
    这些属性都是windw对象的属性。

    8.1.3 窗口位置
    Firefox、Safari、Chrome提供了screenX和screenY属性,IE、Safari、Opera、Chrome提供了screenLeft和screenTop属性,分别表示窗口相对于屏幕左边和上边的位置。

    moveTo()接收两个参数:新位置的x,y坐标值;

    moveBy()接受两个参数:水平和垂直方向上移动的像素数。这两个方法都不适用于框架,只能对最外层的window对象使用。

    8.1.4 窗口大小
    outerWidth、outerHeight返回浏览器本身的尺寸。
    innerWidth、innerHeight返回浏览器页面视图容器的大小。
    chorome中,均返回浏览器页面视图容器的大小。
    IE8及更早版本没有提供获取当前浏览器窗口尺寸的属性,可通过DOM获取。
    document.documentElement.clientWidth和document.documentElement.clientHeight保存了页面视口的信息,标准模式下有效。
    在混杂模式下,必须通过documnent.body.clientWidth和document.body.clientHeight取得相同信息。chrome都可以获取。

    resiziTo()和resizeBy()可以调整浏览器窗口大小。
    resiziTo()接收浏览器窗口的新宽度和新高度,resizeBy()接收新窗口与原窗口的宽度与高度之差。

    8.1.5 导航与打开窗口
    1 window.open()可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。接收四个参数:

    (要加载的URL,窗口目标,一个特性字符串,一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值)
    通常只传递第一个参数,最后一个参数在不打开新窗口的情况下使用。小学六年级英语第二个参数是已有窗口或框架的名称。

    2 window.open()第三个参数:一个逗号分隔的字符串,表示新窗口中都显示哪些特性。
    fullscreen(yes、no)、height(数值)、left、top、width、scrobare(yes、no)等等,以名值对表示:”height=400,resizeble=yes”。

    3 window.open()返回一个指向新窗口的引用。

    4 window.close()可以关闭新打开的窗口,该方法仅适用于通过window.open()打开的新窗口。

    8.1.6 超时调用和间歇调用
    1 间歇调用是在指定的时间过后执行代码,使用window.setTimeout()方法,接受两个参数:(要执行的代码,执行代码前需要等待的毫秒数)。eg:setTimeout(function(){},1000);

    在经过指定时间后代码不一定会执行,因为JavaScript是一个单线程序的解释器,因为一定时间内只能执行一段代码,第二个参数告诉JavaScript再经过多少时间把当前任务添加到任务队列中。方法返回一个数值,表示超时调用ID,可以通过调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它,从而取消尚未执行的超时调用代码。

    2 间歇调用是指每隔指定的时间就就执行一次代码,调用方式与超时调用一致。使用setInterval(),返回一个间歇调用ID,使用clearInterval()方法传入相应间歇调用ID。

    一般使用超时调用来模拟间歇调用是一种最佳模式。

    8.1.7 系统对话框
    浏览器通过alert()、confirm()、prompt()方法调用系统对话框向用于显示消息,外观由操作系统和浏览器设置决定,不由CSS决定。

    1 alert()生成警告。没有返回值。
    2 confirm()会显示两个按钮:确认、取消,返回布尔值。
    3 prompt()生成提示框,提示用于输入一些文本,显示:确认、取消、本文框。接受两个参数:(显示给用户的文本提示,文本输入域的默认值),返回输入域的值。

    8.2 location对象
    location对象是最有用的BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,雅思简介还提供了一些导航功能。location对象提供了与当前窗口中加载的文档有关的信息,还将URL解析为独立的片段:hash、host、hostname、href、pathname、port、protocol、search。设置相应的属性,可以逐段或者整体性地修改浏览器的URL。

    window.location与document.location引用的是同一对象。

    位置操作:location对象可以通过很多方式改变浏览器位置。其中最常用的方法是设置location.href属性

    使用assign()方法并为其传递一个URL,可以立即打开新URL并在浏览器的历史记录中生成一条记录(可以后退),将window.location或location.href设置为一个URL值,也会调用assign()方法。

    要禁止后退,可以调用replace()方法,接受导航到的URL参数,且不会在历史记录中生成新记录。

    reload()方法以最有效重载当前显示的页面,会从浏览器缓存中重新架子啊,看气质强制服务器重新加载,传递参数true。

    8.3 navigator对象
    主要用来识别客户端浏览器。eg:navigator.userAgent;返回用户代理字符串。

    8.3.1 检测插件
    navigator.plugins;返回浏览器中安装的插件信息的数组,数组中每一项包含下列属性:
    name:插件名字;
    descripttion:插件的文件名;
    filename:插件的文件名;
    length:插件所处理的MIME类型数量。

    IE检测插件的唯一方式是使用专有的ActiveXObject类型,并尝试创建一个特定插件的实例。

    8.3.2 注册处理程序
    Firefox为navigator对象增加了registerContentHandler()和registerProtocolHandle()方法,可以让一个站点指明它可以处理特定类型的信息。

    registerContentHandler()接受三个参数:(要处理的MIME类型,可以处理该MIME类型的页面URL,应用程序名称)。registerProtocolHandle()接受三个参数:(要处理的协议,处理该协议的页面URL,应用程序的名称)

    8.4 screen对象
    screen对象只用来表明客户端能力,包括浏览器窗口外部的显示器信息,如像素宽度和高度。在测定客户端能力的站点跟踪工具中常用。调整浏览器窗口的大小,使其占据屏幕的可用空间,例如:

    许多浏览器禁用调整浏览器窗口大小的能力,因此上面代码不一定在所有环境下都是适用的。

    8.5 history对象
    history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起,sat阅读分数表但是无法得知用户浏览过的URL,可以借用用户访问过的页面列表,实现后退和前进。

    history.go()方法可以在用户历史记录中跳转,接受一个参数:表示向后或者向前跳跃的页面数的一个整数值。负数表示向后跳转,整数表示向前跳转。

    也可以传给go()方法一个字符串参数,此时浏览器会跳转到历史记录中包含该字符串的第一个位置——可能后退,也可能前进,具体看哪个位置最近。如果不包含该参数,则什么方法也不做。

    history.back()和history.forward()模仿浏览器的后退和前进按钮。

    history.length保存着历史记录的数量。

    补充:

      • top对象始终指向最外围的框架,也就是整个浏览器窗口。
      • parent对象表示包含当前框架的框架,而self对象则回指window。 
  • 相关阅读:
    getline在windows系统下的怪现象
    android camera根据屏幕图像大小设置显示
    android camera以时间来命名照片文件
    android 基本的画图方法
    android 开发使用剪切板传递数据
    用keytool生成一个自签名证书,并导出到文件
    VBA,两个sheet根据第一列id相同比较其余列,不同的值放到sheet3中
    摄像头视频采集压缩及传输
    Extjs 3根据数据库动态生成checkboxgroup(extjs系列1)
    Extjs 3,jstl根据数据库数据自动构建FormPanel(Extjs系列2)
  • 原文地址:https://www.cnblogs.com/zhangyanran/p/10037500.html
Copyright © 2020-2023  润新知