BOM
Browser Object Model
window.history
控制瀏覽器的前進后退
console內(nèi)輸入,可以觀察到效果
window.history.back()
window.history.forward()
window.history.go(-1) // === back()window.innerHeight
瀏覽器窗口內(nèi)容區(qū)域高度window.length
針對頁面中的iframe，有幾個長度就是幾window.location
操縱瀏覽器的刷新按鈕和地址欄
window.location.在當(dāng)前頁面打開百度,也可以寫成window.location = 'http://www.baidu.com'
location.protocol協(xié)議
location.hostname域名
location.port端口
location.host域名加端口
location.pathname路徑
location.search返回？后面的東西
location.hash#后面的 錨點fragment 哈希
location.origin協(xié)議加域名加端口window.name
a標簽內(nèi)設(shè)置target就能修改window.namewindow.navigator
瀏覽器的所有信息
window.navigator.useragent可以用來區(qū)別不同瀏覽器window.screen
屏幕相關(guān)信息
window.screen.availHeight
window,screen.heightwindow.self
window.self是一個全局屬性，var一個self變量就會覆蓋window.self
打開新窗口
- window.open("http://www.baidu.com",'_self');
第一個參數(shù)為URL,第二個參數(shù)為windowName，第三個參數(shù)是window的一些屬性features - window.opener.location.reload()
用在iframe頁面中，讓打開這個iframe頁面的頁面刷新。 - 在頁面正中央打開一個指定寬高的窗口
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="test.js"></script>
</head>
<body>
<button id="btn">彈出窗口</button>
<script>
var btn = document.querySelector('#btn');
btn.addEventListener('click',function () {
$.bom.openWindowAtCenter(1000,800,'http://baidu.com');
})
</script>
</body>
</html>
test.js寫為：
window.$ = function () {}
$.bom = {
openWindowAtCenter : function (width,height,url) {
window.open(url,'_blank',`
width = ${width}px,
height = ${height}px,
screenX = ${screen.width/2 - width/2}px,
screenY = ${screen.height/2 - height/2}px,
`)
}
}
