Nomenclature JavaScript-tutoriel HTML-php.cn

Nomenclature JavaScript

php中世界最好的语言

Libérer： 2018-02-26 09:21:07

original

2170 Les gens l'ont consulté

Cette fois, je vous apporte JavaScript BOM Quelles sont les précautions d'utilisation de JavaScriptBOM Voici un cas pratique, jetons un coup d'œil.

Objet location
L'objet location fournit des informations sur le document chargé dans la fenêtre actuelle, et fournit également certaines
fonctions de navigation. C'est un attribut de l'objet fenêtre. C'est également une propriété de l'objet document.
Syntaxe : location.href
Fonction : Renvoie l'URL complète de la page actuellement chargée
Description : location.href est équivalent à window.location.href
Syntaxe : location.hash
Fonction : Return Le hachage dans l'URL (# suivi de zéro ou plusieurs caractères), s'il n'est pas inclus, renvoie une chaîne vide
Syntaxe : location.host
Fonction : Renvoie le nom du serveur et le numéro de port (le cas échéant)
Syntaxe :locationhostname
Fonction : Renvoie le nom du serveur sans le numéro de port.
Syntaxe : location.pathname
Fonction : Renvoie le nom du répertoire et/ou du fichier dans l'URL.
Syntaxe : location.port
Fonction : Renvoie le numéro de port spécifié dans l'URL, sinon, renvoie une chaîne vide.
Syntaxe : location.protocol
Fonction : Renvoie le protocole utilisé par la page
Syntaxe : location.search
Fonction : Renvoie la chaîne de requête de l'URL. Cette chaîne commence par un point d'interrogation.
Syntaxe : location.replace(url)
Fonction : URL de redirection
Description : L'utilisation de location.replace ne générera pas de nouveaux enregistrements dans les enregistrements historiques.
Syntaxe : location.reload()
Fonction : Recharger la page actuellement affichée.
Description :
location.reload() est prêt à se charger à partir du tampon
location.reload(true) recharge depuis le serveur
objet historique
l'objet historique est save L'historique des pages visitées par les utilisateurs dans le navigateur
Syntaxe : history.back()
Fonction : Revenir à l'étape précédente de l'historique
Description : Equivalent à l'utilisation de history.go(-1)
Syntaxe : location.forward()
Fonction : Revenir à l'étape suivante de l'enregistrement historique
Explication : Équivalent à l'utilisation de history.go(1)
Syntaxe : history.go(-n)
Fonction : Revenir aux n premières étapes de l'enregistrement historique
Syntaxe : history.go(n)
Fonction : Revenir aux n dernières étapes de l'enregistrement historique
navigateur object
useragent : contenu utilisé pour identifier le nom du navigateur, la version, le moteur, le système d'exploitation et d'autres informations.
Objet d'écran
Syntaxe : screen.availWidth
Fonction : Renvoie la largeur d'écran disponible
Syntaxe : screen.availHeight
Fonction : Renvoie la hauteur d'écran disponible

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

écran .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>

Copier après la connexion

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Chargement de la syntaxe du module ES6 import export

Code pour déterminer si la connexion est invalide

Comment utiliser getBoundingClientRect() pour réaliser le défilement et la fixation des conteneurs div

Deux méthodes pour implémenter la disposition du flux en cascade

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!