BOM操作
一 概念
# BOM
#### 1、窗口操作 open
```js
// 新tag打开目标地址
open("http://www.yahoo.com");
// 自身tag转跳目标地址
open("http://www.yahoo.com", '_self');
// 自定义窗口打开目标地址
open("http://www.yahoo.com", '_blank', 'width=300, height=300');
```
#### 2、历史记录 history
```js
// 历史后退
history.back();
// 历史前进
history.forward()
```
#### 3、导航器 navigator
```js
// 拥有浏览器信息的字符串
navigator.userAgent;
```
#### 4、地址信息 location
```js
// 协议
location.protocol
// 服务器
location.hostname
// 端口号
location.port
// 参数拼接
location.search
```
二 代码示范
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>BOM</title>
</head>
<body>
<button class="b1">open</button>
<button class="b2">前进</button>
<button class="b3">浏览器信息</button>
</body>
<!-- open -->
<script type="text/javascript">
var b1 = document.querySelector('.b1');
b1.onclick = function () {
// 新tag打开目标地址
// window.open("http://www.yahoo.com");
// 自身tag转跳目标地址
// open("http://www.yahoo.com", '_self');
// 自定义窗口打开目标地址
open("http://www.yahoo.com", '_blank', 'width=300, height=300');
}
</script>
<script type="text/javascript">
var b2 = document.querySelector('.b2');
b2.onclick = function () {
// 历史后退
// history.back();
// 历史前进
history.forward();
// history.go(num)
}
</script>
<script type="text/javascript">
var b3 = document.querySelector('.b3');
b3.onclick = function () {
console.log(navigator.userAgent);
if (navigator.userAgent.match("Chrome")) {
alert("谷歌浏览器")
}
}
</script>
<script type="text/javascript">
// 协议
console.log(location.protocol);
// 服务器
console.log(location.hostname);
// 端口号
console.log(location.port);
// 参数拼接
console.log(location.search);
</script>
</html>
