這篇文章主要講解了“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:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Document</title>
<styletype="text/css">
.box1{
height:900px;
background:#ccc;
}
.box2{
height:500px;
background-color:#333;
}
</style>
</head>
<body>
<divid="box1"></div>
<div></div>
<inputtype="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:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<inputtype="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:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<ahref="example_2.html">example_2.html</a>
<inputtype="button"value="后退"id="btn1">
<inputtype="button"value="前進"id="btn2">
<script>
varbtn1=document.getElementById('btn1');
varbtn2=document.getElementById('btn2');
btn1.onclick=function(){
//history.back();
history.go(-1);
}
btn2.onclick=function(){
history.forward()
//history.go(1);
}
</script>
</body>
</html>
navigator.html:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
functiongetBrowser(){
varexplorer=navigator.userAgent.toLowerCase();
varbrowser="";
if(explorer.indexOf("msie")>-1){
browser="IE";
}elseif(explorer.indexOf("chrome")>-1){
browser='Chrome';
}else{
browser='asdf';
}
returnbrowser;
}
varmsg="您用的是"+getBrowser()+'瀏覽器';
console.log(msg);
</script>
</body>
</html>
screen.html:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="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>
感謝各位的閱讀，以上就是“JavaScript的BOM實例分析”的內容了，經過本文的學習后，相信大家對JavaScript的BOM實例分析這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
