BOM-浏览器对象模型

Posted on   |   In   |     |   Views

DOM:中的顶级对象是document—-太监(大总管);BOM:中的顶级对象是window——皇上;整个浏览器就是window,页面中的document也属于window

  • 变量,函数,对象都属于window
  • 但是:写代码的时候,window可以直接省略

window 对象

BOM，即浏览器对象模型，核心是：window 对象

全局变量

全局变量不能通过 delete 操作符删除。

窗口关系及框架

如果页面中包含框架，每个框架都有自己的 window 对象，并且保存在 frames 集合中。每一个 window 对象都有一个 name 属性，其中包含框架的名称。

1
2
3
4
5
6
7
8
9
10
11
12
<html>
  <head>
    <title>Frameset Example</title>
  </head>
  <frameset rows="160, *">
    <frame src="frame0.html" name = "topFrame">
    <frameset cols="50%, 50%"> 
      <frame src="frame1.html" name = "leftFrame">
      <frame src="frame2.html" name = "rightFrame">
    </frameset>  
  </frameset>
</html>
  • window.frames[0]
  • window.frames[“topFrame”]
  • top.frames[0]
  • top.frames[“topFrame”]
  • frames[0]
  • frames[“topFrame”]

窗口位置

IE、Safari、Opera、Chrome 支持

  • screenLeft
  • screenTop

FireFox 支持

  • screenX
  • screenY

窗口移动方法

  • moveTo()
  • moveBy()

窗口大小

IE9+、Safari、Opera、FireFox、Chrome 支持

  • innerWidth
  • innerHeight
  • outerWidth
  • outerHeight

IE9+、Safari、FireFox 中 outer… 返回浏览器本身的尺寸(window 和 框架都是)。Opera 中则是页面视图容器大小。Chrome 中 两两都返回相同的值，即视口大小而非浏览器窗口大小。

在 IE9、Safari、Opera、FireFox、Chrome 中，document.documentElement.clientWidth 和 document.documentElement.clientHeight 保存了页面视口信息。在 IE 的标准模式下生效，而混杂模式使用的是： document.body 中的 clientHeight 和 clientWidth。而 Chrome 通过 document.body 和 document.documentElement 都可以获取到页面视图。

可以通过检查 document.compatMode 来检测浏览器是否处于标准模式。

导航和打开窗口

window.open() 方法，四个参数：要加载的 URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。和 a 标签的 herf 属性一个功能。不怎么用。

间歇调用和超时调用

超时调用

  • setTimeout() 方法
    • 两个参数，
    • 一是要执行的回调函数或一个包含 JavaScript 代码的字符串
    • 而是以毫秒值表示的时间。即在执行前需要等待的时间。
    • 传递字符串消耗性能。
    • 返回一个 ID
    • 在非严格模式下，this 指向 window，严格模式下是 undefined。
  • clearTimeout() 清除超时调用

间歇调用

  • setInterval() 方法
    • 参数同 setTimeout() 方法相同
    • 返回也是一个 ID
    • 间歇调用一直执行到页面卸载
  • clearInterval()
    • 清除间歇调用

系统对话框

  • alert()
  • confirm()
  • prompt()
1
2
3
4
5
6
7
8
if(window.confirm("你确定要退出吗?")) {
    //执行到这里,证明用户点击了确定按钮
    console.log("点击了确定");
} else {
    //证明了用户点击了取消的按钮
    console.log("点击了取消");
}
window.prompt("请输入用户名");

location 对象

属性有：

  • hash 返回 URL 中的哈希值
  • hostname 返回服务器名称和端口号
  • herf 返回当前页面加载的完整的 URL。 location 对象的 toString() 方法也返回这个值。
  • pathname 返回 URL 中的目录（或）文件名
  • port 返回 URL 中指定的端口号
  • protocol 返回页面使用的协议
  • search 返回 URL 的查询字符串

方法有：

  • location.assign(“http://www.baidu.com“);
    • 改变浏览器的位置
  • location.replace(“http://www.baidu.com“);
    • 地址不会记录到历时中—-后退点不了
  • location.reload();
    • 刷新—一般情况在页面中用一个按钮点击刷新

BOM的一些方法

  • win = window.open(“09test.html”,”_blank”,”width=200,height=200,top=100,left=100,resizable=no”);
  • win.close();//此时close方法 无论open中第一个参数是不是地址都可以关闭窗口
  • win.moveTo(300,300);//把新打开的窗口移动到距离左侧和上面300px
  • win.moveBy(20,20);//每次移动20px
  • win.resizeTo(400,400);//窗口的大小发生了改变
  • win.resizeBy(40,40);

属性或方法：

  • appCodeName 浏览器名称
  • appMinorVersion 此版本信息
  • appName 完整浏览器名称
  • appVersion 浏览器版本
  • buildID
  • cookieEnabled
  • cpuClass
  • javaEnabled()
  • language
  • mimeType
  • onLine
  • opsProfile
  • oscpu
  • platform
  • plugins
  • preference()
  • product
  • productSub
  • register-ContentHandler()
  • register-ProtocalHandler()
  • securifyPolicy
  • systemLanguage
  • taintEnabled()
  • userAgent
  • userLanguage
  • userProfile
  • vendor
  • vendorSub

screen 对象

用处不大，此处不再详细说明。

history对象

  • window.history.forward();
  • window.history.back();//后退
  • window.history.go();
感谢您的支持！