JavaScript

《JavaScript高级程序设计》Chapter 8 BOM

2016-09-23  本文已影响93人  云之外

Chapter 8 BOM（浏览器对象模型）

window 对象

  1. 在网页中定义的任何一个对象、变量和函数，都以 window 作为其 Global 对象。

  2. 全局作用域

    • 所有在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法。
    • 定义全局变量与在 window 对象上直接定义属性有一定差别：全局变量不能通过 delete 操作符删除。
    var age = 23; // 如此添加的 window 属性有一个名为[[Configurable]]的特性的值为false。
window.color = 'Yellow';
delete window.age; // false
delete window.color; // true
    • 尝试访问未声明的变量会抛出错误，尝试访问不存在的属性会得到undefined
    var newValue = oldValue; // Error
var newValue = window.oldValue; // undefined

  3. 窗口关系及框架

    • 如果页面中包含框架，则每个框架都拥有自己的 window 对象，并确保存在 frames 集合中。在 frames 集合中，可以通过数值索引或者框架名称来访问相应的 window 对象。每一个 window 对象都有一个 name 属性，其中包含框架的名称。
    <frameset rows="160, *">
    <frame src="frame.html" name="topFrame">
        <frameset cols="50%, 50%">
            <frame src="frame_1.html" name="leftFrame"></frame>
            <frame src="frame_1.html" name="rightFrame"></frame>
        </frameset>
    </frame>
</frameset>
<!--
    可以使用 window.frames[0] 或者 window.frames['topFrame']来引用上方的框架。
-->
    • 最好使用 top 而非 window 来引用顶层框架。top 对象始终指向最高（最外）层的框架，也就是浏览器窗口。使用它可以确保在一个框架中正确地访问另一个框架。因为对于在一个框架中编写的任何代码来说，其中的 window 对象指向的都是那个框架的特定实例，而非最高层框架。
    • parent 对象始终指向当前框架的直接上层框架。在没有框架的情况下，parent 等于 top 等于 window。
    • 除非最高层窗口是通过 window.open() 打开的，否则其 window 对象的 name 属性不会包含任何值。
    • self 对象始终指向 window，二者可以互换使用。

  4. 窗口位置(窗口相对于屏幕左边和上边的位置）

    • 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;
    • screenTop/screenY 在 IE、Opera 中保存的是从屏幕左边和上边到由 window 对象表示的页面可见区域的距离。在 Chrome、Firefox、Safari中，保存的是整个浏览器窗口相对于屏幕的坐标值。--> 无法再跨浏览器的条件下取得窗口左边和上边的精确坐标值。
    • moveTo(x, y) 将窗口移动到新的 x, y 坐标处。（可能会被浏览器禁用）
    • moveBy(x, y) 将窗口 水平，垂直 移动 x, y 的距离 （可能会被浏览器禁用）

  5. 窗口大小

    • innerWidth innerHeight outerWidth outerHeight
    • 在 IE9+、Safari、Firefox 中，outerWidth 和 outerHeight 返回浏览器窗口本身的尺寸。在Opera中，这两个属性值表示页面视图容器（单个标签页对应的浏览窗口）的大小。
    • innerWidth 和 innerHeight 表示该容器中页面视图区的大小（减去边框宽度）。
    • 在Chrome中，outerWidth、outerHeight、innerWidth、innerHeight 返回相同的值，即视口（viewport）的大小。
    • 在标准模式下，使用 document.documentElement.clientWidth 和 document.documentElement.clientHeight获取页面视口信息。
    • 在混杂模式下，使用 document.documentElement.clientWidth 和 document.documentElement.clientHeight获取页面视口信息。
    • resizeTo(x, y) 接收浏览器窗口的新宽度和新高度。（可能会被浏览器禁用）
    • resizeBy(x, y) 接收浏览器窗口与原窗口的宽度和高度之差。（可能会被浏览器禁用）

  6. 导航和打开窗口

    • window.open(): 打开一个新的浏览器窗口 / 导航到一个特定的url。
      • 接收四个参数：要加载的URL、窗口目标、一个特性字符串、一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。
      • 窗口目标：已有窗口或框架的名称，会在具有该名称的窗口中加载第一个参数指定的URL；不存在的话会创建一个新窗口并命名为这个参数的值，在此显示指定的URL。
      • 窗口目标也可以是这些值：_self _parent _top _blank
      • 弹出窗口：如果 窗口目标 是一个不存在的窗口或框架，那么该方法会根据在第三个参数位置上传入的字符串创建一个新窗口或标签页。如果没有传入第三个参数，那么就会打开一个带有全部默认设置的新浏览器窗口。在不打开新窗口的情况下，第三个参数会被忽略。（具体参数查手册）
      • 安全限制：弹窗限制 / 弹窗屏蔽程序
      • 当 window.open() == null 的时候，就意味着弹窗功能被屏蔽了。要注意避免因此发生的错误。

  7. 间歇调用和超时调用

    • JavaScript是单线程语言，它允许通过设置超时值（在指定时间过后执行）和间歇值（每个指定的时间执行一次）来调度代码在特定的时刻执行。
    • setTimeout() 设置超时值
      • 接收两个参数：要执行的代码（最好传递一个 function 不建议传递代码）、以毫秒表示的时间。
      • 返回一个数值ID，表示超时调用。这个超时调用ID是计划执行代码的唯一标识符，可以通过它取消超时调用。
    • clearTimeout(ID) 取消超时调用，需要在setTimeout中的代码执行之前执行。
    • setInterval() 设置间歇值
    • clearInterval() 取消间歇调用

  8. 系统对话框

    • alert()
    • confirm()
    • prompt()

location 对象

  1. 提供与当前窗口中加载的文档有关的各种信息，还有一些导航功能。

  2. 它既是 window 对象的属性，也是 document 对象的属性

    • window.location === document.location

  3. location 会将 URL 解析成不同的片段，方便使用。（查手册）

  4. 查询字符串参数

    • 访问 URL 中的字符串属性
    function getQueryStringArgs() {
    var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
        args =  {},
        items = qs.length ? qs.split('&') : [],
        item = null,
        name = null,
        value = null,
        
        i = 0,
        len = items.length;
        
    for (i = 0; i < len; i++) {
        item = items[i].split('=');
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);
        
        if(name.length) {
            args[name] = value;
        }
    }
    return args;
}
    • 步骤
      • 去掉查询字符串开头的问号；
      • 所有参数将被保存在 args 对象中，该对象以字面量形式创建；
      • 根据 & 来分割查询字符串，并返回 name = value 格式的字符串数组， for 循环用来迭代这个数组，并根据等于号分割每一项，从而返回一个第一项为参数名，第二项为参数值的数组；
      • 将 name 作为 args 对象的属性，将 value 作为相应的属性值。

  5. 位置操作

    • location.assign(URL): 改变浏览器的位置；立即打开新 URL 并在浏览器的历史记录中生成一条记录。
    • location.href = URL / window.location = URL: 以 URL 的值调用 assign 方法。
    • 可以使用 location.hash/search/hostname/pathname... = value 的方式修改 location 的属性，并使得页面以新的 URL 重新加载（ hash 除外）。
    • 使用上述方法，都会在浏览器的历史记录中生成一条新的记录，也就意味着通过“后退”按钮可以导航到之前的页面。可以使用 replace() 禁用。
    • replace(URL): 导航到指定 URL，并不在历史记录中生成新的记录。
    • reload(): 重新加载当前显示的页面
      • reload(); // 有可能从缓存中加载
      • reload(true); // 强制从服务器加载

navigator 对象

  1. 识别客户端浏览器的事实标准。每个浏览器中的 navigator 对象都有一套自己的属性。（查手册）

  2. 插件检测

    • plugins 数组: 非IE浏览器的插件列表
      • name: 插件名
      • description: 插件的描述
      • filename: 插件的文件名
      • length: 插件所处理的 MIME 类型的数量
    • 在检测插件时，通常需要循环迭代每个插件并将插件的 name 与给定的名字进行比较
    function hasPlugin(name) {
    name = name.toLowerCase();
    for (var i = 0; i < navigator.plugins.length; i++) {
        if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) {
            return true;
        }
    }
    return false;
}

alert(hasPlugin('Flash'));
alert(hasPlugin('QuickTime'));

    MIME (Multipurpose Internet Mail Extensions) 多用途互联网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。

    • 使用 IE 专有的 ActiveXObject 类型进行插件检测。因为 IE 是以 COM 对象的方式实现插件的，而 COM 对象使用唯一标识符来标识。因此，要想检查特定的插件，就必须知道其 COM 标识符。
    function hasIEPlugin(name) {
    try {
        new ActiveXObject(name);
        return true;
    } catch (ex) {
        return false;
    }
}
alert(hasIEPlugin('ShockwaveFlash.ShockwaveFlash'); // 检测 Flash
alert(hasIEPlugin('QuickTime.QuickTime'); // 检测 QuickTime
    • 典型的做法是针对每个插件分别创建检测函数，而不是针对浏览器。

  3. 注册处理程序 （仅限 Firefox）

    • registerContentHandler() & registerProtocolHandler(): 让一个站点指明它可以处理特定类型的信息。

screen 对象

  1. 用来表明客户端的能力，其中包括浏览器窗口外部的显示器信息，如像素宽度和高度等。
  2. 在涉及移动端屏幕大小时，iOS 与 Android 有所不同
    • iOS 始终认为屏幕是竖屏状态，所以返回值永远是 宽 < 高
    • Android 会真实的返回 screen.width 和 screen.height

history 对象

  1. 保存用户上网的历史记录，从窗口被打开的那一刻算起。
  2. history 与 window 对象关联，因此每一个浏览器窗口、每一个标签页、每一个框架都有自己的 history 对象与特定的 window 对象关联。
  3. go() 方法
    • history.go(-1); // 后退一页
    • history.go(1); // 前进一页
    • history.go(2); // 前进两页
    • history.go('qq.com'); // 跳转到最近的 qq.com 的页面
  4. back() & forward()
    • history.back(); // 后退一页
    • history.forward(); // 前进一页
  5. 检测当前页是否是用户打开的第一页
    • history.length 保存着历史记录的数量。
    • history.length == 0
上一篇下一篇

猜你喜欢

热点阅读