正文
从零开始学习前端JAVASCRIPT — 5、JavaScript基础BOM
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1：BOM（Browser Object Model）概念
window对象是BOM中所有对象的核心。
2：window属性（较少用）
self：self代表自己，相当于window。
window.self; //指向自身窗口
parent：返回父窗口。
window.parent //指向父元素的窗口
top：返回顶层窗口，和parent作用一样。
window.top
console.log(window.parent == window.top);
opener：窗口开启者。
console.log(window.opener);
3：window方法
1.window.open(url, name, feature, replace);
window.open('opener.html', 'open');//打开opener.html的页面，窗口的标题open
url：一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。
name：一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。
这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。
feature：自行扩展。replace：自行扩展。
谷歌默认会把系统自动打开的新网页阻止掉，但不阻止通过事件打开新的网页。
2.close：关闭浏览器。（window.close()//关闭浏览器窗口）
但都支持通过别的网页打开的新的网页关闭。
3.alert(显示的文本)：弹出窗。（window.alert()//浏览器窗口弹框）
4.confirm(对话框提示的文字)：该方法有返回值，点击确定返回true，点击取消返回false。
console.log(window.confirm('今天下雪了吗？')); //点击确认输出true；点击取消输出false
5.prompt(提示信息)：输入框。点击确定返回字符串，点击取消返回null。
console.log(window.prompt('请问1+1等于几？'));
//弹出窗口有书写区域，返回值为输入的信息，若不填写为null
4：history对象
该对象包含浏览器窗口访问过的url。
1.属性
length 返回浏览器历史记录的数量
2.方法(使用以下方法返回网页history的记录不增不减)
back() 后退，加载前一个url。
forward() 前进。
go(number) 如果参数是正数，那么就是前进相应的数目，如果是负数那么反之，如果是0那么就是刷新。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>file1</title>
</head>
<body>
<a href="file2.html">file2</a>
<a href="file3.html">file3</a>
<a href="file4.html">file4</a>
<button id="back">回退到上一个页面</button>
<button id="forward">前进到下一个页面</button>
<button id="go">进两步</button>
<script>
console.log(history.length);
var oBack = document.getElementById('back')
oBack.onclick = function () {
history.back()
} var oForward = document.getElementById('forward')
oForward.onclick = function () {
history.forward()
} var oGO = document.getElementById('go')
oGO.onclick = function () {
history.go()
}
</script>
</body>
</html>
页面一的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>file2</title>
</head>
<body>
<a href="file1.html">file1</a>
<a href="file3.html">file3</a>
<a href="file4.html">file4</a>
<button id="go">后退1步</button>
<button id="back">回退到上一个页面</button>
<button id="forward">前进到下一个页面</button>
<script>
console.log(history.length);
var oBack = document.getElementById('back')
oBack.onclick = function () {
history.back()
}
var oForward = document.getElementById('forward')
oForward.onclick = function () {
history.forward()
}
var oGO = document.getElementById('go')
oGO.onclick = function () {
history.go(-1)
}
</script>
</body>
</html>
页面二的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>file3</title>
</head>
<body>
<a href="file1.html">file1</a>
<a href="file2.html">file2</a>
<a href="file4.html">file4</a>
<button id="go">刷新</button>
<button id="back">回退到上一个页面</button>
<button id="forward">前进到下一个页面</button>
<script>
console.log(history.length);
var oBack = document.getElementById('back')
oBack.onclick = function () {
history.back()
}
var oForward = document.getElementById('forward')
oForward.onclick = function () {
history.forward()
}
var oGO = document.getElementById('go')
oGO.onclick = function () {
history.go(0)
}
</script>
</body>
</html>
页面三的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>file4</title>
</head>
<body>
<a href="file1.html">file1</a>
<a href="file2.html">file2</a>
<a href="file3.html">file3</a>
<button id="go">后退1步</button>
<button id="back">回退到上一个页面</button>
<button id="forward">前进到下一个页面</button>
<script>
console.log(history.length);
var oBack = document.getElementById('back')
oBack.onclick = function () {
history.back()
}
var oForward = document.getElementById('forward')
oForward.onclick = function () {
history.forward()
}
var oGO = document.getElementById('go')
oGO.onclick = function () {
history.go(-1)
}
</script>
</body>
</html>
页面4的代码
5：location对象
包含有当前url的相关信息，而history对象不能具体反应url的相关信息。
完整的URL组成部分：协议（schema http:// https://）域名(domain) 端口号（port 80 443）/路径（path）查询字符串（？ query）锚点连接（# hash）
属性：
href：设置或返回完整的url。可以为相对路径，也可以为绝对路径。
search：返回url?后面的查询部分。hash ：是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。
方法：
assign(url)：加载新的文档。
reload(boolean)：重新加载文档，当参数是true，任何时候都会重新加载，false的时候，只有在文档改变的时候才会加载，否则直接读取内存当中的。
replace(url)：用新的文档代替当前的文档。但不会在 History 对象中生成一个新的记录。当使用该方法时，新的 URL 将覆盖 History 对象中的当前记录。
6：navigator对象
userAgent：用户代理信息，通过该属性可获取浏览器及操作系统信息。可通过此对象查看浏览器的信息，项目的不兼容此版本浏览器可给出用户的相关建议。console.log(navigator.userAgent);
console.log(navigator.userAgent);
7：window事件
- onresize：窗口缩放事件。
window.onresize = function () {
console.log(2)
}
- onload：加载事件网页加载完毕后执行。// 获取浏览器视窗宽度/高度
window.onload = function () {
console.log(document.documentElement.clientWidth)
console.log(document.documentElement.clientHeight)
}
- onscroll：滚动事件。// 获取浏览器滚动条隐藏的宽度/高度
chrome(body)、火狐、IE(documentElement)
通过或者的方式兼容各版本的浏览器：
window.onscroll = function () {
var iScrollT = document.documentElement.scrollTop || document.body.scrollTop;
var iScrollL = document.documentElement.scrollLeft || document.body.scrollLeft;
console.log(iScrollL)
}
