Home > Article > Web Front-end > JavaScriptBOM
This time I will bring you the JavaScript BOM. What are the precautions for using JavaScript's BOM? The following is a practical case, let's take a look.
location object
The location object provides information related to the document loaded in the current window, and also provides some
navigation functions. It is both a property of the window object, It is also a property of the document object.
Syntax: location.href
Function: Return the complete URL of the currently loaded page
Description: location.href is equivalent to window.location.href
Syntax: location.hash
Function: Return The hash in the URL (# followed by zero or more characters), if not included, returns an empty string
Syntax: location.host
Function: Returns the server name and port number (if any)
Syntax :locationhostname
Function: Return the server name without the port number.
Syntax: location.pathname
Function: Return the directory and/or file name in the URL.
Syntax: location.port
Function: Return the port number specified in the URL, if not, return an empty string.
Syntax: location.protocol
Function: Return the protocol used by the page
Syntax: location.search
Function: Return the query string of the URL. This string starts with a question mark.
Syntax: location.replace(url)
Function: Redirect URL
Description: Using location.replace will not generate new records in historical records.
Syntax: location.reload()
Function: Reload the currently displayed page.
Description:
location.reload() is willing to load from the buffer
location.reload(true) reloads from the server
history object
history object is saved The history of pages visited by users in the browser
Syntax: history.back()
Function: Return to the previous step in the history
Description: Equivalent to using history.go(-1)
Syntax: location.forward()
Function: Return to the next step of the historical record
Description: Equivalent to using history.go(1)
Syntax: history.go(-n)
Function: Return to the first n steps of the historical record
Syntax: history.go(n)
Function: Return to the last n steps of the historical record
navigator object
useragent: Content used to identify browser name, version, engine, operating system and other information.
screen object
Syntax: screen.availWidth
Function: Return the available screen width
Syntax: screen.availHeight
Function: Return the available screen height
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>I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related reading:
ES6 module syntax loading import export
Determine whether the login is invalid code
How to use getBoundingClientRect() to achieve scrolling and fixation of div containers
Two methods to implement waterfall flow layout
The above is the detailed content of JavaScriptBOM. For more information, please follow other related articles on the PHP Chinese website!