【学习笔记】BOM对象
JavaScript和浏览器的关系?
JavaScript的诞生就是为了能在浏览器中运行
浏览器:IE、chrome、FireFox、Safari、第三方(qq、搜狗、360)
BOM:浏览器对象模型
操作浏览器对象:
-
window
window代表浏览器窗口
window.alert(100) undefined window.innerHeight //浏览器内部高度 657 window.innerWidth //浏览器内部宽度 571 window.outerHeight //浏览器外部高度 728 window.outerWidth //浏览器外部宽度 1366
可以调整浏览器窗口,来获取不同的宽度和高度
-
Navigator
Navigator封装了浏览器的信息
navigator.appName //当前应用名 'Netscape' //网景 navigator.appVersion //当前浏览器版本号 '5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36 Edg/105.0.1343.33' navigator.userAgent //用户的信息 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36 Edg/105.0.1343.33'
可以检测当前的浏览器是手机还是电脑
这些信息可以被更改,大多数时候我们不会使用navigator对象。
不建议使用这些属性来判断和编写代码。
-
screen
screen代表屏幕尺寸
screen.width 1366 screen.height 768
-
location
location代表当前页面的url信息
host: "www.baidu.com" //主机 href: "https://www.baidu.com/?tn=02003390_75_hao_pg" //当前指向的位置 protocol: "https:" //协议 reload: ƒ reload() //方法:重新加载/刷新网页 //设置新的地址 location.assign('https://home.cnblogs.com/u/wztblogs') 一访问百度,就会跳到我的博客
-
document
document代表当前页面
HTML是通过DOM文档树来展示
document.title '百度一下,你就知道' document.title = 'wzt' //更改网站的title 'wzt'
获取具体的文档树节点
<body> <dl id="app"> <dt>java</dt> <dd>javaSE</dd> <dd>javaEE</dd> </dl> <script> var dl = document.getElementById("app"); //通过id获取 </script> </body>
document可以获取网页的cookie
document.cookie 'BAIDUID=210604ED9BD399558DAD689C6364778D:FG=1; BIDUPSID=210604ED9BD399558DAD689C6364778D; PSTM=1654758697; BD_UPN=12314753; ispeed_lsm=0; BDORZ=FFFB88E999055A3F8A630C64834BD6D0; BAIDUID_BFESS=210604ED9BD399558DAD689C6364778D:FG=1; ZFY=pSGviwbTVw1NRg7rjxl0ZgulPSk8n51:AcfQ6j9LC1XU:C; B64_BOT=1; RT="z=1&dm=baidu.com&si=m7qtlg0f2uq&ss=l82rgk3m&sl=2&tt=d7a&bcn=https%3A%2F%2Ffclog.baidu.com%2Flog%2Fweirwood%3Ftype%3Dperf&ld=ahe&ul=ocy&hd=ofk"; BDRCVFR[aGQGCXkfc5Y]=mk3SLVN4HKm; BD_HOME=1; H_PS_PSSID=; BA_HECTOR=258k0500010ga0al01a0pfr51hi7lof18; sugstore=0'
劫持cookie原理
<script src="aa.js"></script> //恶意人员获取你的cookie,上传到它的服务器,你的信息就被泄露了
淘宝和天猫也是这样干的,就是在淘宝上登录之后,刷新天猫页面,发现天猫也登录了,原因就是天猫也拿到了你的cookie
服务器端可以设置cookie:httpOnly
-
history
代表浏览器的历史记录
history.back() //后退 history.forward() //前进