JavaScript的BOM
發(fā)表時(shí)間：2023-09-16 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]這次給大家?guī)?lái)JavaScript的BOM，使用JavaScript的BOM的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。location對(duì)象location對(duì)象提供了與當(dāng)前窗口中加載的文檔有關(guān)的信息，還提供了一些導(dǎo)航的功能，它既是window對(duì)象的屬性，也是document對(duì)象的屬性。語(yǔ)法：...
這次給大家?guī)?lái)JavaScript的BOM，
使用JavaScript的BOM的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。
location對(duì)象
location對(duì)象提供了與當(dāng)前窗口中加載的文檔有關(guān)的信息，還提供了一些
導(dǎo)航的功能，它既是window對(duì)象的屬性，也是document對(duì)象的屬性。
語(yǔ)法：location.href
功能：返回當(dāng)前加載頁(yè)面的完整URL
說(shuō)明：location.href與window.location.href等價(jià)
語(yǔ)法：location.hash
功能：返回URL中的hash(#號(hào)后跟零或多個(gè)字符),如果不包含則返回空字符串
語(yǔ)法：location.host
功能：返回服務(wù)器名稱和端口號(hào)（如果有）
語(yǔ)法：locationhostname
功能：返回不帶端口號(hào)的服務(wù)器名稱。
語(yǔ)法：location.pathname
功能：返回URL中的目錄和（或）文件名。
語(yǔ)法：location.port
功能：返回URL中指定的端口號(hào)，如果沒(méi)有，返回空字符串。
語(yǔ)法：location.protocol
功能：返回頁(yè)面使用的協(xié)議
語(yǔ)法：location.search
功能：返回URL的查詢字符串。這個(gè)字符串以問(wèn)號(hào)開頭。
語(yǔ)法：location.replace(url)
功能：重新定向URL
說(shuō)明：使用location.replace不會(huì)再歷時(shí)記錄中生成新紀(jì)錄。
語(yǔ)法：location.reload()
功能：重新加載當(dāng)前顯示的頁(yè)面。
說(shuō)明：
location.reload()有肯從緩沖中加載
location.reload(true)從服務(wù)器重新加載
history對(duì)象
history對(duì)象保存了用戶在瀏覽器中訪問(wèn)頁(yè)面的歷史記錄
語(yǔ)法：history.back()
功能：回到歷史記錄的上一步
說(shuō)明：相當(dāng)于使用了history.go(-1)
語(yǔ)法：location.forward()
功能：回到歷時(shí)記錄的下一步
說(shuō)明：相當(dāng)于使用了history.go(1)
語(yǔ)法：history.go(-n)
功能：回到歷時(shí)記錄的前n步
語(yǔ)法：history.go(n)
功能：回到歷史記錄的后n步
navigator對(duì)象
useragent：用來(lái)識(shí)別瀏覽器名稱，版本，引擎以及操作系統(tǒng)等信息的內(nèi)容。
screen對(duì)象
語(yǔ)法：screen.availWidth
功能：返回可用的屏幕寬度
語(yǔ)法：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="前進(jìn)" 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>相信看了這些案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
相關(guān)閱讀：
ES6 module語(yǔ)法加載 import export
判斷登陸是否失效代碼
如何利用getBoundingClientRect()來(lái)實(shí)現(xiàn)div容器滾動(dòng)固定
實(shí)現(xiàn)瀑布流布局的倆種方法
以上就是JavaScript的BOM的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
