浏览器常用全局变量使用 BOM的理解,常见的BOM对象你了解哪些?

是什么

BOM (Browser Object Model),浏览器对象模型,提供了独立于内容与浏览器窗口进行交互的对象

其作用就是跟浏览器做一些交互效果,比如如何进行页面的后退,前进,刷新,浏览器的窗口发生变化,滚动条的滚动,以及获取客户的一些信息如:浏览器品牌版本,屏幕分辨率

浏览器的全部内容可以看成DOM,整个浏览器可以看成BOM。区别如下:

浏览器常用全局变量使用 BOM的理解,常见的BOM对象你了解哪些?

访问客户端对象

使用 window 对象可以访问客户端其他对象,这种关系构成浏览器对象模型,window 对象代表根节点,浏览器对象关系的关系如图所示,每个对象说明如下。

  • window:客户端 JavaScript 顶层对象。每当 或 标签出现时,window 对象就会被自动创建。
  • navigator:包含客户端有关浏览器信息。
  • screen:包含客户端屏幕的信息。
  • history:包含浏览器窗口访问过的 URL 信息。
  • location:包含当前网页文档的 URL 信息。
  • document:包含整个 HTML 文档,可被用来访问文档内容及其所有页面元素。


浏览器常用全局变量使用 BOM的理解,常见的BOM对象你了解哪些?

当然我们可以吧window下的所有子对象看成他的他的属性,只不过属性也是一个对象而已。其实window也有很多常用的方法:

浏览器常用全局变量使用 BOM的理解,常见的BOM对象你了解哪些?


window

Bom的核心对象是window,它表示浏览器的一个实例

在浏览器中,window对象有双重角色,即是浏览器窗口的一个接口,又是全局对象

因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法

var name = 'js每日一题';
function lookName(){
  alert(this.name);
}

console.log(window.name);  //js每日一题
lookName();                //js每日一题
window.lookName();         //js每日一题

关于窗口控制方法如下:

  • moveBy(x,y):从当前位置水平移动窗体x个像素,垂直移动窗体y个像素,x为负数,将向左移动窗体,y为负数,将向上移动窗体
  • moveTo(x,y):移动窗体左上角到相对于屏幕左上角的(x,y)点
  • resizeBy(w,h):相对窗体当前的大小,宽度调整w个像素,高度调整h个像素。如果参数为负值,将缩小窗体,反之扩大窗体
  • resizeTo(w,h):把窗体宽度调整为w个像素,高度调整为h个像素
  • scrollTo(x,y):如果有滚动条,将横向滚动条移动到相对于窗体宽度为x个像素的位置,将纵向滚动条移动到相对于窗体高度为y个像素的位置
  • scrollBy(x,y): 如果有滚动条,将横向滚动条向左移动x个像素,将纵向滚动条向下移动y个像素

window.open() 既可以导航到一个特定的url,也可以打开一个新的浏览器窗口

如果 window.open() 传递了第二个参数,且该参数是已有窗口或者框架的名称,那么就会在目标窗口加载第一个参数指定的URL

window.open('htttp://www.vue3js.cn','topFrame')
==> < a href=" " target="topFrame">

window.open() 会返回新窗口的引用,也就是新窗口的 window 对象

const myWin = window.open('http://www.vue3js.cn','myWin')

window.close() 仅用于通过 window.open() 打开的窗口

新创建的 window 对象有一个 opener 属性,该属性指向打开他的原始窗口对象

Window 子对象

Window的子对象主要有如下几个:

  1. JavaScript document 对象
  2. JavaScript frames 对象
  3. JavaScript history 对象
  4. JavaScript location 对象
  5. JavaScript navigator 对象
  6. JavaScript screen 对象


浏览器常用全局变量使用 BOM的理解,常见的BOM对象你了解哪些?

打开和关闭窗口

使用 window 对象的 open() 方法可以打开一个新窗口。用法如下:

window.open (URL, name, features, replace)

参数列表如下:


该方法返回值为新创建的 window 对象,使用它可以引用新创建的窗口。

浏览器常用全局变量使用 BOM的理解,常见的BOM对象你了解哪些?


新创建的 window 对象拥有一个 opener 属性,引用打开它的原始对象。opener 只在弹出窗口的最外层 window 对象(top)中定义,而且指向调用 window.open() 方法的窗口或框架。

示例1

下面示例演示了打开的窗口与原窗口之间的关系。

win = window.open();  //打开新的空白窗口win.document.write ("

这是新打开的窗口

"); //在新窗口中输出提示信息win.focus (); //让原窗口获取焦点win.opener.document.write ("

这是原来窗口

"); //在原窗口中输出提示信息console.log(win.opener == window); //检测window.opener属性值

使用 window 的 close() 方法可以关闭一个窗口。例如,关闭一个新创建的 win 窗口可以使用下面的方法实现。

win.close;

如果在打开窗口内部关闭自身窗口,则应该使用下面的方法。

纯文本复制
window.close;

使用 window.closed 属性可以检测当前窗口是否关闭,如果关闭则返回 true,否则返回 false。

示例2

下面示例演示如何自动弹出一个窗口,然后设置半秒钟之后自动关闭该窗口,同时允许用户单击页面超链接,更换弹出窗口内显示的网页 URL。

var url = "c.biancheng.net";  //要打开的网页地址var features = "height=500, width=800, top=100, left=100, toolbar=no, menubar=no,    scrollbars=no,resizable=no, location=no, status=no";  //设置新窗口的特性//动态生成一个超链接document.write('切换到C语言中文网首页');var me = window.open(url, "newW", featrues);  //打开新窗口setTimeout (function () {  //定时器    if (me.closed) {        console.log("创建的窗口已经关闭。");    } else {        me.close();    }}, 5000);  //半秒钟之后关闭该窗口


location

url地址如下:

http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q=javascript#contents

location属性描述如下:

属性名

例子

说明

hash

"#contents"

utl中#后面的字符,没有则返回空串

host

www.wrox.com:80

服务器名称和端口号

hostname

www.wrox.com

域名,不带端口号

href

http://www.wrox.com:80/WileyCDA/?q=javascript#contents

完整url

pathname

"/WileyCDA/"

服务器下面的文件路径

port

80

url的端口号,没有则为空

protocol

http:

使用的协议

search

?q=javascript

url的查询字符串,通常为?后面的内容

除了 hash之外,只要修改location的一个属性,就会导致页面重新加载新URL

location.reload(),此方法可以重新刷新当前页面。这个方法会根据最有效的方式刷新页面,如果页面自上一次请求以来没有改变过,页面就会从浏览器缓存中重新加载

如果要强制从服务器中重新加载,传递一个参数true即可

window.name属性

window.name属性用于设置当前浏览器窗口的名字。它有一个特点,就是浏览器刷新后,该属性保持不变。所以,可以把值存放在该属性内,然后跨页面、甚至跨域名使用。当然,这个值有可能被其他网站的页面改写。

window.name = "Hello World!";
console.log(window.name);

各个浏览器对这个值的储存容量有所不同,但是一般来说,可以高达几MB。

该属性只能保存字符串,且当浏览器窗口关闭后,所保存的值就会消失。因此局限性比较大,但是与iFrame窗口通信时,非常有用。

window.innerHeight属性,window.innerWidth属性

这两个属性返回网页的CSS布局占据的浏览器窗口的高度和宽度,单位为像素。很显然,当用户放大网页的时候(比如将网页从100%的大小放大为200%),这两个属性会变小。

注意,这两个属性值包括滚动条的高度和宽度。

window.pageXOffset属性,window.pageYOffset属性

window.pageXOffset属性返回页面的水平滚动距离,window.pageYOffset属性返回页面的垂直滚动距离。这两个属性的单位为像素。

iframe元素

window.frames返回一个类似数组的对象,成员为页面内的所有框架,包括frame元素和iframe元素。需要注意的是,window.frames的每个成员对应的是框架内的窗口(即框架的window对象),获取每个框架的DOM树,需要使用window.frames[0].document。

var iframe = window.getElementsByTagName("iframe")[0];
var iframe_title = iframe.contentWindow.title;

上面代码用于获取框架页面的标题。

iframe元素遵守同源政策,只有当父页面与框架页面来自同一个域名,两者之间才可以用脚本通信,否则只有使用window.postMessage方法。

在iframe框架内部,使用window.parent指向父页面。

window.self,window.window

window.self和window.window属性都指向窗口本身。这两个属性只读。

window.self === window // true
window.window === window // true

window.frames,window.length

window.frames属性返回一个类似数组的对象,成员为页面内所有框架窗口,包括frame元素和iframe元素。window.frames[0]表示页面中第一个框架窗口。

如果iframe元素设置了id或name属性,那么就可以用属性值,引用这个iframe窗口。比如 // 下面的脚本在 about.html 里面 var frameEl = window.frameElement; if (frameEl) { frameEl.src = 'other.html'; }

上面代码中,frameEl变量就是