BOM常见的API和造个小轮子

2017-09-13 本文已影响16人晓风残月1994

一. BOM常用的API：

BOM：浏览器对象模型, 是操作浏览器的API

window.console返回console对象的引用，该对象提供了对浏览器调试控制台的访问。
window.history.back 历史记录后退
window.history.forward 历史记录前进
window.history.go(-1) === window.history.back
window.history.go(1) === window.history.forward
(数字绝对值大于1的话，应该只在控制台有效)
window.history.go(-1) === window.history.back
window.innerHeight 获取浏览器窗口的内容区域的高度，包含水平滚动条（如果有的话）

document.location === location //true
document.location === window.location  //true

window.location

location属性返回一个只读对象，提供了当前文档的URL信息( 可以操作刷新按钮和地址栏)
比如( 推荐第一种)：

window.location.href = '//www.baidu.com' 跳转到百度（默认使用当前协议）
window.location.href = 'http://www.baidu.com'
window.location.href = 'https://www.baidu.com'
window.location.href = 'wwww.baidu.com' 但是这样是不行的，是跳转的相对路径，也就是跳转到 www.jianshu.com/www.baidu.com
http://www.jianshu.com/www.baidu.com

另外，浏览器有个小技巧：

document.location = 'http://www.example.com';
// 等价于
document.location.href = 'http://www.example.com';

window.location = '//www.baidu.com‘
对location 直接赋值，默认就是赋值了 location.href
location.protocol 获取协议
location.hostname 获取域名
location.port 获取端口
location.host 获取域名+端口比如： xxx.com:9124

https://developer.mozilla.org/zh-CN/docs/Web/API/Window?a=1&b=2#xxx
如上所示：
location.pathname 获取路径
"/zh-CN/docs/Web/API/Window"
location.search 获取查询字符串
"?a=1&b=2"
location.hash 获取fragment、锚点
"#xxx"
location.origin 获取网站源头协议+域名+端口号

综上所述，通过location可以拿到地址栏的所有信息。

window.navigator 获取当前浏览器的各项信息1
window.navigator.userAgent 当前浏览器的用户代理（user agent）字符串

window.name 获取/设置窗口的名称
窗口的名字主要用于为超链接和表单设置目标（targets）
每个窗口的name 是唯一的。

<a href="http://www.baidu.com" target="wang">baidu</a>
<a href="http://www.qq.com" target="wang">qq</a>

window.outerHeight 获取浏览器外部高度
window.parent 获取当前window or subframe 父级的引用
比如 window.parent.name 获取父级的name

window.screen 获取屏幕相关信息

返回与窗口相关联的屏幕对象的引用。
Returns a reference to the screen object
associated with the window.

1. window.screen.availHeight 返回浏览器窗口在屏幕上可占用的垂直空间，即最大高度
  (除属性栏之外的高度，如果设置隐藏任务栏，则是我的当前分辨率的高度，即height:1080)
1. window.screen.availWidth 返回1920 （原理同上）
1. window.screen.height 获取屏幕高度（1080）
1. window.screen.width 获取屏幕宽度（1920）
1. window.screen.colorDepth 获取颜色深度（24）

永远不要声明全局变量！能不用，全不用

window.self 是window 自身。
window.window 也还是window
全局变量会默认的放在window上，于是
window.parent window.screen 等等属性都被覆盖了，就获取不到了，而是你重新的声明赋值。
比如 var parent = 1 , 这时候 window.parent 就不是window的属性方法了，而就是1.

二. 打开新窗口

window.open(url, windowName, windowFeatures)
参数分别为url、名字、属性

<body>
  <button id="button1">Open a window!!!</button>
  <script>
    button1.onclick = function(){
      window.open('http://www.baidu.com')
    }
  </script>
</body>

但以上不是在当前窗口打开，而是新窗口，想要在当前窗口打开，如下：

button1.onclick = function(){
  window.open('http://www.baidu.com', '_self')
  // _self 表示当前窗口，a标签里也可以用, 当然a标签默认就是在当前窗口打开，而这里的open 默认是新窗口打开
}

如果想要popup 弹出一个窗口呢？并且有指定的宽高，那么如下：

// 指定第三个可选参数，
button1.onclick = function(){
  let f = 'width=400px, height=400px'
  window.open('http://www.baidu.com', '_blank', f)
}
// 或者不用 let 直接写在里面，而且省略第二个参数，因为默认就是_blank, 这里如果指定为_self，那么是不会弹出弹出指定大小的窗口的，
而是在原窗口打开，大小和原窗口无异：
button1.onclick = function(){
  window.open('http://www.baidu.com', '', 'width=400px, height=400px')
}

A中代码(打开B)：

button1.onclick = function(){
  window.open('http://www.baidu.com', '', 'width=400px, height=400px')
}

B中代码(刷新A)：

// 打开我的窗口（A）刷新，opener指的就是A
button1.onclick = function(){
  window.opener.location.reload() 
}

在页面正中央打开一个指定宽高的窗口

open 的默认是做不到的，但是可以通过JS来实现
//设计API

// 首先声明 $  ，返回array
window.$ = function(){
  let array = []
  //省略
  return array
}
// 完成API：绑定个属性叫 bom，bom 是个对象，对象里面有个函数
$.bom = {
  openAtCenter: function(width, height, url){  //用来设置弹窗居中，并能指定宽高
    window.open(url, '_blank', `
      width=${width}px, height=${height}px,
      screenX=${screen.width/2-  width/2}px,
      screenY=${screen.height/2 - height/2}px
    `)
  }
}// 上面使用了ES6的模板字符串， `${}` 使用反引号内部可以嵌入表达式

使用API，可以直接把JS部分放在当前页面，也可以单独放在.js文件中，在当前页面用 <script src="xxx.js"></script>引用。

<head>
  <script src="bom.js"></script>
</head>
<body>
  <button id="button1">获取 a</button>

  <script>
    button1.onclick = function(){ //调用API
      $.bom.openAtCenter(300, 300, 'http://baidu.com')
    }
    document.write(Math.random()) // 页面写入 随机数 [0,1)  用来检测当前父级是否刷新
  </script>
</body>

本篇主要介绍了常用的BOM API, 脑海中有个印象就好，知道有这些API的存在，具体需要用到的时候，多查查文档就好了，毕竟那么多的API也是背不下来的。