BOM

下述内容主要讲述了《JavaScript高级程序设计(第3版)》第8章关于“BOM”。

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

一、window对象

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

1. 全局作用域

由于window对象同时扮演者ECMAScript中Global对象的角色,因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。 区别:全局变量不能通过delete操作符删除,而直接在window对象上定义的属性可以。

var a = 1;
delete a;       // false
console.log(a); // 1

window.b = 1;
delete window.b;        // true
console.log(window.b);  // undefined

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

// Uncaught ReferenceError: oldValue is not defined(…)
var newValue = oldValue;

// 不会抛出错误,值为undefined
var newValue = window.oldValue;

2. 窗口关系及框架

对象

说明

示例

top

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

top.frames[0]

parent

parent(父)对象始终指向当前框架的直接上层框架

parent.frames[0]

self

始终指向window

self

说明: (1)window对象指向的都是那个框架的特定实例,而非最高层的框架。 (2)没有框架的情况下,parent一定等于top(此时它们都等于window)。

3. 窗口位置&窗口大小

window.moveTo(100, 100);   // 调整到距离左边和上边的坐标为(100, 100)
window.moveBy(100, 50);    // 调整到距离左边和上边的坐标为(200, 50)
window.resizeTo(100, 100); // 调整到100*100
window.resizeBy(100, 50);  // 调整到200*150

4. 导航和打开窗口

window.open(“要加载的URL”, “窗口目标或_slef、_parent、_top或_blank”, “特性字符串”, “新窗口是否取代浏览器历史记录中当前页面的布尔值”);

<a href="http://blog.csdn.net/ligang2585116" target="myFrame"></a>
// 等价于
var newWin = window.open("http://blog.csdn.net/ligang2585116", "myFrame");

示例:弹出窗口

<a href="javascript:;" οnclick="openWin();">打开新窗口</a>
<a href="javascript:;" οnclick="closeWin();">关闭新窗口</a>
<script>
    var newWin;
    /**
     * 打开新窗口
     */
    function openWin(){
        newWin = window.open("http://blog.csdn.net/ligang2585116", "_blank");

        // 轮询监听子窗口是否被关闭
        var timer = setInterval(function(){
            if(newWin.closed){
                newWin = null;
                clearInterval(timer);
                console.log("子窗口已被关闭");
            }
        }, 100);
    }

    /**
     * 在父窗口中关闭子窗口
     */
    function closeWin(){
        newWin.close();
    }
</script>

5. 间歇调用和超时调用

(1)超时调用的代码都是在全局作用域中执行的,因此函数中this的值在非严格模式下指向window对象,在严格模式下是undefined。 (2)在开发环境下,很少使用真正的间歇调用,原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。 请参考:JavaScript高级技巧

6. 系统对话框

浏览器通过alert()、confirm()和prompt()方法可以调用系统对话框向用户显示信息。这几个对话框都是同步和模态的。也就是说,显示这些对话框的时候代码会停止执行,而关掉这些对话框后代码又会恢复执行。 还有两个可以通过JavaScript打开的对话框,即“查找”和“打印”。

// 显示“打印”对话框
window.print();
// 显示“查找”对话框
window.find();

二、location对象

location是最有用的BOM对象之一,其既是window对象的属性,也是location对象的属性。换言之,window.locationdocument.location引用的是同一对象。

示例:http://blog.csdn.net/ligang2585116?name=ligang&age=26#top

属性名

说明

示例结果

hash

返回URL中的hash(#号后跟零或多个字符)

“#top”

host

返回服务器名称和端口号(如果有)

“blog.csdn.net”

hostname

返回不带端口号的服务器名称

“blog.csdn.net”

href

返回当前加载页面的完整URL(同toString方法)

“http://blog.csdn.net/ligang2585116?name=ligang&age=26#top”

pathname

返回URL中的目录

“/ligang2585116”

port

返回URL中的端口号,如果不存在返回空字符串

“”

protocol

返回页面使用的协议

“http:”

search

返回URL的查询字符串,以问好开头

“?name=ligang&age=26”

1. 查询字符串参数

示例:解析字符串(传统)

function urlArgs(){
    var args = {};
    var query = location.search.substring(1);
    var pairs = query.split("&");
    for(var i=0; i<pairs.length; i++){
        var pos = pairs[i].indexOf('=');
        if(pos == -1) continue;
        var name = pairs[i].substring(0,pos);
        var value = pairs[i].substring(pos+1);
        value = decodeURIComponent(value);
        args[name] = value;
    }
    return args;
}
urlArgs();

示例:解析字符串(正则)– JavaScript正则表达式

function enhanceUrlArgs(query){
    var args = {};
    query.replace(/([^?&=]+)=([^&])/g, function(full, key, value){
        args[key] = value;
        return "";
    });
    return args;
}
enhanceUrlArgs(location.search);

2. 位置操作

使用location对象可以通过很多方式改变浏览器的位置。

// 立即打开新URL并在浏览器的历史记录中生成一条记录
location.assign("http://blog.csdn.net/ligang2585116");

如果是将kk或是window.location设置为一个URL值,也会以该值调用assign()方法。

// 与显示调用assign()方式效果完全一样
window.location = "http://blog.csdn.net/ligang2585116";
location.href = "http://blog.csdn.net/ligang2585116";

修改location对象的其他属性也可以改变当前加载的页面。每次修改location的属性(hash除外),页面都会以新URL重新加载!!浏览器的历史记录中会生成一条记录,点击“后退”按钮会导航到前一个页面。

// replace()方法会禁止“后退”,其不在历史记录中生成新记录
location.replace("http://blog.csdn.net/ligang2585116");
location.reload();      // 重新加载(有可能从缓存中加载)
location.reload(true);  // 重新加载(从服务器重新加载)

注意:不传递参数时,页面会以最有效的方式重新加载。如果页面自上次请求以来并没有改变过,页面就会从浏览器缓存中重新加载。传递参数true,会强制从服务器重新加载。

三、navigator对象

识别客户端浏览器的实际标准。

属性或方法

说明

示例

cookieEnabled

表示cookie是否启用

true

language

浏览器主语言

“zh-CN”

onLine

表示浏览器是否连接到了因特网

true

platform

浏览器所在的系统平台

“MacIntel”

plugins

浏览器中安装的插件信息的数组

PluginArray {0: Plugin, 1: Plugin, 2: Plugin, 3: Plugin, 4: Plugin, length: 5}

userAgent

浏览器的用户代理字符串

“Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36”

四、screen对象

// 调整浏览器窗口大小,使其占据屏幕的可用空间
window.resizeTo(screen.availWidth, screen.availHeight);

注意:许多浏览器都会禁用调整浏览器窗口大小的能力(如:Chrome)

五、history对象

history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。 使用go()方法可以在用户的历史记录中任意跳转,可以向后也可以向前。

// 后退一页
history.go(-1);
history.back();
// 前进一页
history.go(1);
history.forward();

示例:检查是否是打开的第一个页面

if(history.length == 0){
    // 这应该是用户打开窗口后的第一个页面
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券