BOM(Browser Object Model)即浏览器对象模型提供了独立于内容而与浏览器窗口进行交互的对象。由于 BOM 主要用于管理窗口与窗口之间的通讯,因此其核心对象是 window。
window.alert()
// 当前 html 的 URL
location.href
// https://www.baidu.com/lastpath/go?name=zhangshan&id=89785#index
// 查询字符串部分
location.search
// ?name=zhangshan&id=89785
// #号后面的值
location.hash
// #index
// 域名
location.host
// www.baidu.com
// 主域名
location.hostname
// baidu.com
// 主域名后面部分/路径
location.pathname
// lastpath/go
// 端口号
location.port
// 80(默认端口号)
// 协议部分
location.protocal
// https:
// 加载指定的URL
location.assign()
// 替换指定的URL,不同于assgin,无法返回
location.replace()
// 刷新
location.reload()
// 前进或者后退指定的页面数
// 正为前进,负为后退
history.go()
// 后退一页
history.back()
// 前进一夜
history.forward()
// 返回用户代理头的字符串
navigator.userAgent
// "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36"
// 返回是否可以支持cookie
navigator.cookieEnabled
// 返回浏览器名称
navigator.appName // Chrome,IE
// 返回浏览器内核
navigator.appCodeName // Mozilla
// 浏览器的窗口高度
window.innerHeight
// 浏览器的窗口宽度
window.innerWidth
注意: 浏览器窗口的视图不包括工具栏和滚动条 也就是说,在全屏状态下,不同浏览器因为不同的浏览器布局(工具栏、收藏栏、搜索栏)导致不同的innerHeight和innerWidth
window.open(url, target, specs, replace)
target 打开方法
specs 规定新窗口的样式(用,连接)
window.open('https://www.baidu.com', '_self', 'width=1920,height=1080')
window.setTimeout(fn, ms)
window.setInterval(fn, ms)
Cookies 用来在页面储存用户信息
在服务器将页面发送给浏览器后,服务器与浏览器之间的连接就断开了,因为 HTTP 协议是无状态的,此时,服务器就不会记得关于用户的任何信息。
Cookie 就可以来记住用户信息:
name = Kisn
当浏览器向服务器发送网页请求时,对应这个页面的 cookies 就被加入到了请求中,这样的服务器就能获取到辨认这个用户的所需的信息。
JavaScript 可以用个document.cookie属性来穿件、读取和删除 cookies
// 创建
function setCookie(name, val, time) {
var exp = new Date()
exp.setTime(exp.getTime() + time)
document.cookie = name + '=' + val + ';expires=' + exp.toGMTString()
}
// 读取
function getCookie(name) {
let reg = new RegExp('(^| )' + name + '=([^;]*(;|$))')
if ((res = document.cookie.match(reg))) {
return unescape(res[2])
} else {
return false
}
}
// 删除
function delCookie(name) {
let exp = new Date()
exp.setTime = exp.getTime() - 1
let cval = getCookie(name)
if (cval != null) {
document.cookie = name + '=' + cval + ';expires=' + exp.toGMTString()
}
}
http 是一种无状态协议,因此 Cookie 的最大的作用是储存 sessionId 用辨识用户
共同点
不同点
Cookie:
sessionStorage:
localStorage:
XSS 全称 跨站脚本攻击,我们可以理解为:通过某种方法向 web 页面注入代码,同时浏览器可以被执行这段代码。
比如简单的论坛回复,可以插入部分 HTML、css、JS,可以获取我们的 Cookie
我们可以在 HTTP 头部配置,来防御 XSS 获取 Cookie。
set-cookie: httponly // 禁止js脚本来访问cookie
set-cookie: secure // 仅在请求为https的时候发送cookie
onload,页面加载后执行,所谓页面加载完成,指页面上所有的元素创建完毕,引用的所有的外部资源(js、css、图片)等下载完毕。onunload页面卸载时候执行,在onunload中,所有的对话框都无法使用,因为页面被卸载
Window对象包含以下五大核心:document,screen,navigator,history,location。 document包含了浏览器对标准DOM实现的所有方法和属性。 window.screen包含了用户屏幕的相关信息
BOM(Browser Object Model)即浏览器对象模型,提供了独立于内容而与浏览器窗口进行交互的对象;由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window。
浏览器为我们提供了许多有用的方法,为了使用这些方法,开发者通常需要创建对应的对象,往往使得业务代码显得冗长,缺乏经验的开发者对所建对象的处理方式也显得不够“优雅”。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!