BOM
浏览器对象(Browser Object Model )
BOM可以使我们通过JS来操作浏览器
在BOM为我们提供了一组对象,用来完成对浏览器的操作
BOM对象的 五个主要对象
-
window
代表的时整个浏览器窗口,同时也是window也是网页中的全局对象
-
document
文档对象
-
Navigator
代表当前浏览器的信息,通过该对象可以来识别不同的浏览器
-
Location
代表当前浏览器的地址栏信息
-
History
代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录
由于隐私原因,该对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页
-
Screen
代表用户的屏幕信息, 通过该对象可以获取到用户的显示器的相关信息
window
对象
window
对象表示一个包含DOM文档的窗口,其document
属性指向窗口中载入的 DOM文档 。使用document.defaultView
属性可以获取指定文档所在窗口。
常用方法:
alert(提示信息)
confirm(确认信息)
prompt(弹出输入框)
location
对象
Location
接口表示其链接到的对象的位置(URL)。所做的修改反映在与之相关的对象上。Document
和Window
接口都有这样一个链接的Location,分别通过Document.location
和Window.location
访问。
主要属性:
属性: | 作用 |
---|---|
Location.href | 包含整个URL的一个DOM String (http://127.0.0.1:5500/1.html) |
Location.host | 包含了域名的一个DOM String,可能在该串最后带有一个":"并跟上URL的端口号。 127.0.0.1:5500 |
Location.search | 包含URL参数的一个DOM String,开头有一个“?” 。 |
Location.pathname | 包含URL中路径部分的一个DOM String,开头有一个“/"。 /1.html |
主要方法:
Location.replace()
用给定的URL替换掉当前的资源。与 assign()
方法不同的是用 replace()
替换的新页面不会被保存在会话的历史 History 中,这意味着用户将不能用后退按钮转到该页面。
Location.assign()
加载给定URL的内容资源到这个Location对象所关联的对象上。
// 跳转到 Location.reload() 这篇文章
document.location.assign('https://www.baidu.com');
Location.toString()
返回一个DOM String,包含整个URL。
但是用它是不能够修改Location的值的。
示例:
var url = document.createElement('a');
url.href = 'https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container';
console.log(url.href); // https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container
console.log(url.protocol); // https:
console.log(url.host); // developer.mozilla.org
console.log(url.hostname); // developer.mozilla.org
console.log(url.port); // (blank - https assumes port 443)
console.log(url.pathname); // /en-US/search
console.log(url.search); // ?q=URL
console.log(url.hash); // #search-results-close-container
console.log(url.origin); // https://developer.mozilla.org
History
对象
History.back()
在浏览器历史记录里前往上一页
History.forward()
在浏览器历史记录里前往下一页
History.go()
通过当前页面的相对位置从浏览器历史记录( 会话记录 )加载页面
History.pushState()
按指定的名称和URL(如果提供该参数)将数据push进会话历史栈;
History.replaceState()
按指定的数据,名称和URL(如果提供该参数),更新替换历史栈上最新的入口
注意:
这些BOM对象在浏览器都是window对象的属性保存的
可以通过过window对象来使用,也可以直接使用