JavaScriptBOM-HTML Tutorial-php.cn

JavaScriptBOM

php中世界最好的语言

Release： 2018-02-26 09:21:07

Original

2164 people have browsed it

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 = &#39;#box1&#39;;
            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>

Copy after login

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(&#39;btn&#39;).onclick = function () {
            location.reload();
            //location.reload(true);
        }
    </script>
</body>
</html>

Copy after login

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(&#39;btn1&#39;);
        var btn2 = document.getElementById(&#39;btn2&#39;);
        btn1.onclick = function () {
            //history.back();
            history.go(-1);
        }
        btn2.onclick = function () {
            history.forward()
            //history.go(1);
        }
    </script>
</body>
</html>

Copy after login

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 = &#39;Chrome&#39;;
            } else {
                browser = &#39;asdf&#39;;
            }
            return browser;
        }
        var msg = "您用的是" +getBrowser()+&#39;浏览器&#39;;
        console.log(msg);
    </script>
</body>
</html>

Copy after login

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>

Copy after login

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!