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>信赖看了这些案例你已经把握了办法，更多出色请关注百分百源码网其它相关文章！
相关阅读：
ES6 module语法加载 import export
推断登陆可否失效代码
怎样利用getBoundingClientRect()来实现div容器滚动牢固
实现瀑布流规划的俩种办法
以上就是JavaScript的BOM的具体内容，更多请关注百分百源码网其它相关文章！
