BOM常见的API和造个小轮子

一. 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信息( 可以操作刷新按钮和地址栏)
比如( 推荐第一种):

  1. window.location.href = '//www.baidu.com' 跳转到百度(默认使用当前协议)
  2. window.location.href = 'http://www.baidu.com'
  3. 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也是背不下来的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容

  • 什么是BOM BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而...
    饥人谷_hak阅读 1,566评论 0 1
  • ECMAScript 是 JavaScript 的核心,但如果要在 Web 中使用 JavaScript,那么 B...
    劼哥stone阅读 808评论 2 5
  • 很久以前,这里有一座古宅,相传这锈迹斑斑的铁门后藏着无数的金银财宝。 江湖上有许多人来此寻觅,却无一生还,而那锈烂...
    江流儿_7221阅读 194评论 0 1
  • 如果你来找我, 久久的车程后, 我会捧着温温的的牛奶等在车站。 那时的天气正热, 大杯的西瓜汁你是否还爱着。 如果...
    由緒阅读 341评论 0 0
  • 我是萌果,95后姑娘,自我成长探索者 画走心的画,写走心的字 遇见不一样的自己
    萌果能量站阅读 652评论 0 13