Table of Contents generated with DocToc
BOM
BOM 为浏览器窗口对象的一组 API。
BOM 结构图
属性
属性名 | 描述 |
---|---|
navigator | 浏览器信息 |
location | 浏览器定位和导航 |
history | 窗口浏览器历史 |
screen | 屏幕信息 |
navigator
navigator.userAgent
- Chrome, Mozilla/5.0(Windows NT 6.1; WOW64) Apple WebKit/37.36 (KHTML, like Gecko) Chrome/40.0.2214.115 Safari/537.36
- Firefox, Mozilla/5.0(Windows NT 6.1; WOW64; rv:36.0) Gecko/20100101 Firefox/36.0
- IE, Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; InfoPath.3; rv:11.0) like Gecko
appCodeName: "Mozilla"appName: "Netscape"appVersion: "5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.124 Safari/537.36"cookieEnabled: truedoNotTrack: "1"geolocation: GeolocationhardwareConcurrency: 8language: "en-US"languages: Array[4]maxTouchPoints: 0mimeTypes: MimeTypeArrayonLine: truepermissions: Permissionsplatform: "MacIntel"plugins: PluginArrayproduct: "Gecko"productSub: "20030107"serviceWorker: ServiceWorkerContaineruserAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.124 Safari/537.36"vendor: "Google Inc."vendorSub: ""webkitPersistentStorage: DeprecatedStorageQuotawebkitTemporaryStorage: DeprecatedStorageQuota__proto__: Navigator
NOTE:可以通过 userAgent
判断浏览器。
location
代表浏览器的定位和导航。可以使用 location
来操作 URL 中的各个部分。最常用的有 href
属性,当前访问资源的完整路径。
http://www.github.com:8080/index.html?user=li-xinyang&lang=zh-CN#home
| | | | | |
protocol | | | | |
hostname port | | |
\ / pathname search hash
host
方法
assign(url)
载入新的 url,记录浏览记录replace(url)
载入新的 url 不记录浏览记录reload()
重新载入当前页
history
浏览器当前窗口的浏览历史。
length: 9state: null __proto__: History
方法
back(int)
后退forward(int)
前进go(int)
正数向前,附属向后
screen
其中包含屏幕信息。其中 avil-
开头的属性为可用属性,其余则为显示器设备属性。
Window 方法
方法 | 描述 |
---|---|
alert() , confirm() 返回真假, prompt() 返回用户输入值 |
三种对话框 |
setTimeout() , setInterval() |
计时器 |
open() , close() |
开启窗口,关闭窗口 |
NOTE:对话框会阻塞线程。
打开或关闭窗口
var w = window.open('subwindow.html', 'subwin', 'width=300, height=300, status=yes, resizable=yes');
// 既可关闭窗口
w.close();
NOTE:无需记忆,更多属性在使用时查询文档。
Window 事件
事件名 | 描述 |
---|---|
load | 文档和所有图片完成加载时 |
unload | 离开当前文档时 |
beforeunload | 和 unload 类似,但是它提供询问用户是否确认离开的机会 |
resize | 拖动改变浏览器窗口大小时 |
scroll | 拖动浏览器时 |