JavaScriptBOM-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

JavaScriptBOM

Feb 26, 2018 am 09:21 AM

javascript js

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 :

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style type=&quot;text/css&quot;&gt;
        .box1{
            height: 900px;
            background: #ccc;
        }
        .box2{
            height: 500px;
            background-color: #333;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id=&quot;box1&quot;&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;input type=&quot;button&quot; id=&quot;btn&quot; value=&quot;返回顶部&quot;&gt;
    &lt;script&gt;
        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);
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

location02.html:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;input type=&quot;button&quot; value=&quot;刷新&quot; id=&quot;btn&quot;&gt;
    &lt;script&gt;
        /*setTimeout(function () {
            //location.href = &quot;https://www.baidu.com&quot;;
            //window.location = &quot;https://www.baidu.com&quot;;
            location.replace(&quot;https://www.baidu.com&quot;);
        },1000);*/
        document.getElementById(&#39;btn&#39;).onclick = function () {
            location.reload();
            //location.reload(true);
        }
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

history01.html:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;a href=&quot;example_2.html&quot;&gt;example_2.html&lt;/a&gt;
    &lt;input type=&quot;button&quot; value=&quot;后退&quot; id=&quot;btn1&quot;&gt;
    &lt;input type=&quot;button&quot; value=&quot;前进&quot; id=&quot;btn2&quot;&gt;
    &lt;script&gt;
        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);
        }
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

navigator.html:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;script&gt;
        function getBrowser() {
            var explorer = navigator.userAgent.toLowerCase();
            var browser = &quot;&quot;;
            if (explorer.indexOf(&quot;msie&quot;)&gt;-1) {
                browser = &quot;IE&quot;;
            } else if (explorer.indexOf(&quot;chrome&quot;)&gt;-1){
                browser = &#39;Chrome&#39;;
            } else {
                browser = &#39;asdf&#39;;
            }
            return browser;
        }
        var msg = &quot;您用的是&quot; +getBrowser()+&#39;浏览器&#39;;
        console.log(msg);
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

screen.html:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;script&gt;
        console.log(screen.availWidth);
        console.log(screen.availHeight);
        console.log(window.innerWidth);
        console.log(window.innerHeight);
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

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!