JavaScript BOM

通过 BOM，JavaScript可以和浏览器对话。

一、什么是 BOM?

BOM，全称为浏览器对象模型（Browser Object Model (BOM)）

​

二、Windows

所有浏览器都支持 Windows 对象，它代表浏览器的窗口。所有的全局对象、函数和变量都是 Windows 对象的成员。

​

三、Window Screen

window.screen 可以不带 windows ，直接简写为 screen

1. screen.width 和 screen.height

将会返回用户的屏幕宽度和高度，若用户设置了屏幕缩放比例，则也会进行相应的计算。

screen.width 和 screen.height 返回屏幕的宽度和高度

innerWidth 和 innerHeight 返回浏览器窗口的宽度和高度

2. screen.availWidth 和 screen.availHeight

返回用户屏幕的可用宽度和可用高度。

3. screen.colorDepth

返回用户的屏幕色深。

4. screen.pixelDepth

返回用户的像素深度。

​

四、Window Location

window.Location 可以不带 windows ，直接简写为 Location

1. location.href

返回当前页面的 URL 。

2. location.hostname

返回页面的因特网主机的名称。

3. location.pathname

返回页面的路径名。

4. location.protocol

返回页面的 web 协议。

5. location.port

返回页面的互联网主机端口的编号。

6. location.assign()

1
location.assign("URL")

该方法用于加载新文档。

​

五、Window History

window.History 可以不带 windows ，直接简写为 History

1. history.back()

该方法用于加载历史列表的前一个 URL ，相当于浏览器中的后退按钮。

2. history forward()

该方法用于加载历史列表中的下一个 URL ，相当于浏览器中的前进按钮。

​

六、Window Navigator

window.Navigator 可以不带 windows ，直接简写为 Navigator

1. navigator.cookieEnabled

若 cookie 已启用，则该属性为 true，否则为 false 。

2. navigator.appName

该属性将返回浏览器的应用程序名称。

“Netscape” 是 IE11、Chrome、Firefox 以及 Safari 的应用程序名称的统称。

3. navigator.appCodeName

该属性返回浏览器的应用程序代码名称。

“Mozilla” 是 Chrome、Firefox、IE、Safari 以及 Opera 的应用程序代码名称。

4. navigator.product

返回浏览器引擎的产品名称。

5. navigator.appVersion

返回浏览器的版本信息。

6. navigator.userAgent

返回由浏览器发送到服务器的用户代理报头（user-agent header）。

7. navigator.platform

返回浏览器所在的操作系统。

8. navigator.language

返回浏览器的语言。

9. navigator.onLine

返回浏览器是否在线。

10. navigator.javaEnabled()

若该方法返回 true ，则 java 已启用。

11. 慎用navigator

来自 navigator 对象的信息通常是误导性的，不应该用于检测浏览器版本，因为：

  • 不同浏览器能够使用相同名称
  • 导航数据可被浏览器拥有者更改
  • 某些浏览器会错误标识自身以绕过站点测试
  • 浏览器无法报告发布晚于浏览器的新操作系统

​

七、弹出框

1. 警告框

1
2
3
window.alert("字符串")
或
alert("字符串")

2. 确认框

1
2
3
window.confirm("字符串");
或
confirm("字符串");

3. 输入框

1
window.prompt("提示信息,"默认文本");

​

八、Timing

1. 什么是 Timing 事件

JavaScript 可以在时间间隔内执行，这就是所谓的定时事件（ Timing Events）。

2. setTimeout()

1
window.setTimeout(函数, 毫秒数);

等待若干毫秒后执行函数。

3. clearTimeout()

用于停止执行 setTimeout() 中规定的函数。

1
2
myVar = setTimeout(函数, 毫秒数);
clearTimeout(myVar);

4. setInterval()

1
window.setInterval(函数, 毫秒数);

每隔若干毫秒，执行一次函数。

​

九、Cookie

1. 什么是 cookie？

cookie 是在用户计算机中存储的文本数据，用于“记住用户信息”。

通过 document.cookie 来创建、读取、删除 cookie。

1
2
3
4
5
6
// 创建cookie
document.cookie = "username=Bill Gates";
// 创建cookie，并为其设置有效时间
document.cookie = "username=John Doe; expires=Sun, 31 Dec 2017 12:00:00 UTC";
// 创建cookie，并设置cookie属于什么路径
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=URL";
1
var x = document.cookie;

将会返回一个字符串，其中包含了所有的 cookie 。

通过将 cookie 的有效日期设为当前日期之前，即可删除该 cookie 。

1
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

应该定义 cookie 路径以确保删除正确的 cookie，如果不指定路径，一些浏览器不会让你删除 cookie。

Cookie 将逐个添加到字符串中，如果设置了新 cookie，则旧的 cookie 不会被覆盖。

1
2
3
4
5
6
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

上面这个函数的的参数是：cookie 的名字（cname），cookie 的值（cvalue），以及知道 cookie 过期的天数（exdays）。

通过把 cookie 名称、cookie 值和过期字符串相加，该函数就设置了 cookie。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
         if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
         }
     }
    return "";
}

把 cookie 作为参数（cname）。

创建变量（name）与要搜索的文本（CNAME”=”）。

解码 cookie 字符串，处理带有特殊字符的 cookie，例如 “$”。

用分号把 document.cookie 拆分到名为 ca（decodedCookie.split(‘;’)）的数组中。

遍历 ca 数组（i = 0; i < ca.length; i++），然后读出每个值 c = ca[i]。

如果找到 cookie（c.indexOf(name) == 0），则返回该 cookie 的值（c.substring(name.length, c.length）。

如果未找到 cookie，则返回 “”。

1
2
3
4
5
6
7
8
9
10
11
function checkCookie() {
    var username = getCookie("username");
    if (username != "") {
        alert("Welcome again " + username);
    } else {
        username = prompt("Please enter your name:", "");
        if (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
}

如果已设置 cookie，将显示一个问候。

如果未设置 cookie，会显示一个提示框，询问用户的名字，并存储用户名 cookie 365 天，通过调用 setCookie 函数：

​

参考