BOM是“Browser Object Model”的缩写,简称“浏览器对象模型”。

 

BOM定义了JavaScript操作浏览器的接口,提供了访问某些功能(如浏览器窗口大小、版本信息、浏览历史记录等)的途径以及操作方法。

 

BOM只是JavaScript脚本实现的一部分,没有任何相关的标准,W3C也没有对该部分作出规范,每种浏览器都有自己的BOM实现。

 

Window对象包括DOM(anchors/forms/images/links/location)和BOM(frames/history/location/navigator/screen)。

 

系统对话框

  1.弹出警告

直接弹出警告框。

  2.确定和取消

    confirm(“请确定或者取消”);

    if(confirm(“请确定或者取消”)){

确定返回true

    }else{

按取消返回false

    };

  3.输入带输入提示框

两个参数,一个提示,一个值

得到输入的值

 

新建窗口

方法可以导航到一个特定的URL,也可以打开一个新的浏览器窗口,一般可以接受三个参数:要加载的url、窗口的名称或者窗口的目标、一个特性的字符串。

新建页面并打开百度

新建页面并命名窗口并打开百度

在本页窗口打开,_blank是新建

 

  注:不命名会每次打开新窗口,命名的第一次打开新窗口,之后在这个窗口中加载。

 

不支持

  用法:可以关闭自己或者自己创建的子窗口。

 

  第三个参数:

 

open(‘http://www.baidu.com’, ’baidu’, ’width=400, height=400, top=200, left=200’);

第三个参数逗号分隔,不写单位。

本身返回子窗口的window对象

可以指定弹出的窗口执行alert();

 

窗口的移动

<input type="button" value="打开窗口" onclick="openWin()"/>
	  <input type="button" value="移动窗口" onclick="moveWin()"/>  var myWindow;
	  function openWin(){
		    myWindow=window.open('','','width=200,height=100');
		    myWindow.document.write("<p>这是我的窗口</p>");
	  }
	  function moveWin(){
		    myWindow.moveBy(50,100);
		    myWindow.focus();
	  }

把窗口的左上角移动到一个指定的坐标。

可相对窗口的当前坐标把它移动指定的像素。

  X 要把窗口右移的像素数;

  Y 要把窗口下移的像素数。

 

Location对象

是BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。事实上,location对象是window对象的属性,也是document对象的属性;所以window.location和document.location等效。

获取当前URL

 

对象的属性和方法:

设置?后面的字符串,并跳转

设置跳转的URL,并跳转

最有效的重新加载,有可能缓存加载

强制加载,从服务器源头重新加载

  注意:reload()函数不能直接执行,必须要放到事件函数内执行。

 

history对象

对象是window对象的属性,它保存着用户上网的记录,从窗口被打开的那一刻算起。

  属性:

对象中的记录数。

  方法:

前往浏览器历史条目前一个URL,类似后退;

前往浏览器历史条目下一个URL,类似前进;

浏览器在history对象中向前或向后。

对象最初设计来表示窗口的浏览历史。但是出于隐私方面的原因,开发人员无法访问用户浏览过的URL。

 

navigator对象

  appCodeName 返回浏览器的代码名;

  appName 返回浏览器的名称;

  appVersion 返回浏览器的平台和版本信息;

  browserLanguage 返回当前浏览器的语言;

返回指明浏览器中是否启用cookie的布尔值;

  platform 返回运行浏览器的操作系统平台;

返回OS使用的默认语言;

返回由客户机发送服务器的user-agent头部的值;

返回OS的自然语言设置。

 

 

window对象常见事件

事件

window.onload = function(){
  }

事件

document.documentElement.scrollTop 代表垂直的滚动条,向下滚动的距离
  document.body.scrollTop //chrome 代表垂直的滚动条,向下滚动的距离
  document.documentElement.scrollLeft
  document.body.scrollLeft //chrome