BOM介紹,window常见事件,history对象,Location 对象

1BOM介紹

// BOM 也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能。
// BOM 缺少 规范,每个浏览器提供商又按照自己想法去扩展它,
// 那么浏览器共有对象就成了事实的标准。
// 所以,BOM 本身是没有标准的或者还没有哪个组织去标准它。

        //一 window对象

// BOM 的核心对象是 window,它表示浏览器的一个实例。
// window 对象处于 JavaScript 结 构的最顶层,
// 对于每个打开的窗口,系统都会自动为其定义 window 对象

2window常见事件

1窗口加载事件
window.οnlοad=function(){} 传统的注册事件有局限,如果写了多个,以最后一个为主
window.addeventlistener(‘load’,functio(){});没有局限

. domcontentloaded dom加载完成触发,不包括样式表,图片,flash ,ie9以上才支持如果页面图片非常多 此时用这个比较好
document.addeventlistener(‘domcontentloaded’,function{})

load 等页面类容全部加载完毕 ,包含页面的dom元素 图片 flash css等

2调整窗口大小事件
window.οnresize=function(){}

只要窗口大小发生变化,就会触发这个事件 我们经常利用这个事件完成响应式布局.
获取当前屏幕宽度

window.onbeforeunload 在页面关闭的前一刻;
window.onunload 页面正在关闭

History 对象

History 对象包含用户(在浏览器窗口中)访问过的 URL。

History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。

注释:没有应用于 History 对象的公开标准,不过所有浏览器都支持该对象。

back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go() 加载 history 列表中的某个具体页面。1和-1

Location 对象

存储在 Window 对象的 Location 属性中,表示那个窗口中当前显示的文档的 Web 地址。它的 href 属性存放的是文档的完整 URL,其他属性则分别描述了 URL 的各个部分。这些属性与 Anchor 对象(或 Area 对象)的 URL 属性非常相似。当一个 Location 对象被转换成字符串,href 属性的值被返回。这意味着你可以使用表达式 location 来替代 location.href。

不过 Anchor 对象表示的是文档中的超链接,Location 对象表示的却是浏览器当前显示的文档的 URL(或位置)。但是 Location 对象所能做的远远不止这些,它还能控制浏览器显示的文档的位置。如果把一个含有 URL 的字符串赋予 Location 对象或它的 href 属性,浏览器就会把新的 URL 所指的文档装载进来,并显示出来。

除了设置 location 或 location.href 用完整的 URL 替换当前的 URL 之外,还可以修改部分 URL,只需要给 Location 对象的其他属性赋值即可。这样做就会创建新的 URL,其中的一部分与原来的 URL 不同,浏览器会将它装载并显示出来。例如,假设设置了Location对象的 hash 属性,那么浏览器就会转移到当前文档中的一个指定的位置。同样,如果设置了 search 属性,那么浏览器就会重新装载附加了新的查询字符串的 URL。

除了 URL 属性外,Location 对象的 reload() 方法可以重新装载当前文档,replace() 可以装载一个新文档而无须为它创建一个新的历史记录,也就是说,在浏览器的历史列表中,新文档将替换当前文档。

Location 对象包含有关当前 URL 的信息。

Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。

hash 设置或返回从井号 (#) 开始的 URL(锚)。
host 设置或返回主机名和当前 URL 的端口号。
hostname 设置或返回当前 URL 的主机名。
href 设置或返回完整的 URL。
pathname 设置或返回当前 URL 的路径部分。
port 设置或返回当前 URL 的端口号。
protocol 设置或返回当前 URL 的协议。
search 设置或返回从问号 (?) 开始的 URL(查询部分)

location.assign()和href一样,可以跳转页面(也称为重定向页面)可以实现后退功能
location.replace()替换当前页面,因为不记录历史,所以不能回退页面
location.reload()重新加载页面,相当于刷新按钮f5,如果参数为true,强制刷新ctrl+f5

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值