這次帶給大家JavaScript的BOM，使用JavaScript的BOM的注意事項有哪些，以下就是實戰案例，一起來看一下。
location物件
location物件提供了與目前視窗中載入的文件有關的信息，也提供了一些
導覽的功能，它既是window物件的屬性，也是document物件的屬性。
語法：location.href
功能：傳回目前載入頁面的完整URL
說明：location.href與window.location.href等價
語法：location.hash
功能：傳回URL中的hash(#號後面跟著零或多個字元),如果不包含則傳回空字串
語法：location.host
功能：傳回伺服器名稱和連接埠號碼（如果有）
語法：locationhostname
功能：傳回不含連接埠號碼的伺服器名稱。
語法：location.pathname
功能：傳回URL中的目錄和（或）檔名。
語法：location.port
功能：傳回URL中指定的連接埠號，如果沒有，傳回空字串。
語法：location.protocol
功能：傳回頁面使用的協定
語法：location.search
功能：傳回URL的查詢字串。這個字串以問號開頭。
語法：location.replace(url)
功能：重新定向URL
說明：使用location.replace不會再歷時記錄中產生新紀錄。
語法：location.reload()
功能：重新載入目前顯示的頁面。
說明：
location.reload()有肯從緩衝中載入
location.reload(true)從伺服器重新載入
history物件
history物件儲存了使用者在瀏覽器中存取頁面的歷史記錄
語法：history.back()
功能：回到歷史記錄的上一步
說明：相當於使用了history.go(-1)
語法：location.forward()
功能：回到歷時記錄的下一步
說明：相當於使用了history.go(1)
語法：history.go(-n)
功能：回到歷時記錄的前n步驟
語法：history.go(n)
功能：回到歷史記錄的後n步驟
navigator物件
useragent：用來辨識瀏覽器名稱，版本，引擎以及作業系統等資訊的內容。
screen物件
語法：screen.availWidth
功能：傳回可用的螢幕寬度
語法：screen.availHeight
功能：傳回可用的螢幕高度
location01.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1{
height: 900px;
background: #ccc;
}
.box2{
height: 500px;
background-color: #333;
}
</style>
</head>
<body>
<div id="box1"></div>
<div></div>
<input type="button" id="btn" value="返回顶部">
<script>
btn.onclick = function () {
location.hash = '#box1';
console.log(location.hash);
}
console.log(location.href);
console.log(location.hash);
console.log(location.host);
console.log(location.hostname);
console.log(location.pathname);
console.log(location.port);
console.log(location.protocol);
console.log(location.search);
</script>
</body>
</html>location02.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="刷新" id="btn">
<script>
/*setTimeout(function () {
//location.href = "https://www.baidu.com";
//window.location = "https://www.baidu.com";
location.replace("https://www.baidu.com");
},1000);*/
document.getElementById('btn').onclick = function () {
location.reload();
//location.reload(true);
}
</script>
</body>
</html>history01.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="example_2.html">example_2.html</a>
<input type="button" value="后退" id="btn1">
<input type="button" value="前进" id="btn2">
<script>
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
btn1.onclick = function () {
//history.back();
history.go(-1);
}
btn2.onclick = function () {
history.forward()
//history.go(1);
}
</script>
</body>
</html>navigator.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
function getBrowser() {
var explorer = navigator.userAgent.toLowerCase();
var browser = "";
if (explorer.indexOf("msie")>-1) {
browser = "IE";
} else if (explorer.indexOf("chrome")>-1){
browser = 'Chrome';
} else {
browser = 'asdf';
}
return browser;
}
var msg = "您用的是" +getBrowser()+'浏览器';
console.log(msg);
</script>
</body>
</html>screen.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
console.log(screen.availWidth);
console.log(screen.availHeight);
console.log(window.innerWidth);
console.log(window.innerHeight);
</script>
</body>
</html>相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
#如何利用getBoundingClientRect()來實作div容器滾動固定
以上是JavaScript的BOM的詳細內容。更多資訊請關注PHP中文網其他相關文章！
