从零开始学 Web 之 BOM（一）BOM的概念，一些BOM对象

时间 2019-11-17

标签开始 web bom 概念一些对象栏目 HTML 繁體版

原文原文链接

你们好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新......
+------------------------------------------------------------
github：https://github.com/Daotin/Web
微信公众号：Web前端之巅
博客园：http://www.cnblogs.com/lvonve/
CSDN：https://blog.csdn.net/lvonve/
+-----------------------------------------------------------
在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。如今就让咱们一块儿进入 Web 前端学习的冒险之旅吧！javascript

1、BOM

一、BOM的概念

BOM（Browser Object Model）：浏览器对象模型。html

在浏览器中的一些操做均可以使用 BOM 的方法进行编程处理。前端

好比：刷新浏览器、前进、后退、在地址栏输入 URL 等。java

二、BOM 顶级对象

BOM 的顶级对象是：windowgit

window 是浏览器的顶级对象，当调用 window 下的属性和方法时，能够省略 window。github

注意：chrome

一、window 下的一个特殊属性：window.name，因此不要轻易定义 name 变量，会致使 window.name 被修改。编程

二、top 等同于 windows。windows

三、系统对话框

window.alert();
window.prompt();
window.confirm(); // 两个按钮，分别返回 true 和 false。

以上对话框都不建议使用。浏览器

一、弹框时页面没法加载；

二、各个浏览器的样式不相同，且样式不可自定义。

四、页面加载对象

提出问题：

咱们知道，若是将 script 标签放在 head 里面的话，页面加载的时候是先加载的 script 标签，以后才加载 body 里面的标签。若是 script 特别大的话，就很影响用户体验。

解决办法：

一、将 script 标签放在 body 最后。

二、使用 window.onload 事件。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            document.getElementById("btn").onclick = function () {
                alert("haha");
            }
        }
    </script>
</head>
<body>
<input type="button" value="BUTTON" id="btn">
</body>

一、若是不写 window.onload 的话，执行到 document.getElementById("btn") 会报错，由于程序是从上至下执行。

二、window.onload 事件会在页面加载完毕（页面中全部内容、标签、属性以及外部引入的 js文件）时触发。

三、window.onload 能够省略 window。

window.onunload = function () {
    alert("yes");
}

onunload：页面关闭后才触发的事件

window.onbeforeunload = function () {
    alert("yes");
}

onbeforeunload：在页面关闭以前触发的事件

五、location 对象（地址栏）

学习一个对象主要是学习它里面的属性和方法。

5.一、属性

console.log(window.location.hash); // 地址栏上#及后面的内容
console.log(window.location.host); // localhost:63342 ---- 主机名及端口号
console.log(window.location.hostname); // localhost  ---- 主机名
console.log(window.location.port); //63342  ---- 端口号
console.log(window.location.pathname);// /JS/images/location.html --- 相对路径
console.log(window.location.protocol);// http:   --- 协议
console.log(window.location.search);//?_ijt=28855sggj8kcffva8q9bhc1eh0  --- 搜索的内容

5.二、方法

document.getElementById("btn").onclick = function () {
    location.href = "http://fengdaoting.com";
    location.assign("http://fengdaoting.com");
    location.reload();
    location.replace("http://fengdaoting.com");
};

location.href 和 location.assign()：设置跳转的页面地址，这两个属性和方法做用相同，而且都保存跳转前的地址（在浏览器中能够点击返回按钮）。

location.reload()：刷新页面

location.replace(): 设置跳转的页面地址，可是不保存跳转前的地址。

六、history 对象

6.一、方法

window.history.forward(); // 前进
window.history.back() // 后退
window.history.go(number);  // number为正，前进；为负，后退。

七、navigator 对象

7.一、属性

window.navigator.platform; // 判断浏览器所在的系统平台
// win32
window.navigator.userAgent; // 判断浏览器的类型，是谷歌火狐仍是IE
// chrome 下结果：Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36