JavaScript BOM-htmlチュートリアル-php.cn

JavaScript BOM

php中世界最好的语言

リリース： 2018-02-26 09:21:07

オリジナル

2134 人が閲覧しました

今回は JavaScript BOM についてお届けします JavaScript を使用する際の注意点は何ですか? 以下は実際のケースです。

location オブジェクト location オブジェクトは、現在のウィンドウにロードされているドキュメントに関する情報を提供し、いくつかの
ナビゲーション機能も提供します。これは、ウィンドウオブジェクトとドキュメントオブジェクトの両方の属性です。
構文: location.href
関数: 現在ロードされているページの完全な URL を返します
説明: location.href は window.location.href と同等です
構文: location.hash
関数: URL のハッシュを返します (# が続きます)ゼロまたは複数の文字で) が含まれていない場合は、空の文字列を返します
構文: 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)
機能:Go履歴レコードの最後の n ステップに戻る

navigator オブジェクトuseragent: ブラウザ名、バージョン、エンジン、オペレーティングシステム、その他の情報を識別するために使用されます。
画面オブジェクト
構文: 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 = &#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>

ログイン後にコピー

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>

ログイン後にコピー

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>

ログイン後にコピー

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>

ログイン後にコピー

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>

ログイン後にコピー

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い内容については、PHP 中国語 Web サイトの他の関連記事に注目してください。