JavaScript BOM-Standortobjekt + Navigatorobjekt + Verlaufsobjekt

Vorwort:

Das Fensterobjekt stellt uns eine location zum Abrufen oder Festlegen URL des Formulars bereit und kann zum Analysieren der URL verwendet werden. Da diese Eigenschaft ein Objekt zurückgibt, bezeichnen wir diese Eigenschaft auch als location .
Schauen wir uns das als Nächstes genauer an.

1. Standortobjekt

1. URL

Uniform Resource Locator ( URL ) ist die Adresse einer Standardressource im Internet. Jede Datei im Internet hat eine eindeutige URL, die Informationen darüber enthält, wo sich die Datei befindet und was der Browser damit tun soll.

Die allgemeine Syntax einer URL lautet:

Protokoll://Host[:Port]/Pfad/[?Abfrage]#Fragment
http://www.itcast.cn/index.html?name=andy&age=18#link

2. Eigenschaften des Standortobjektes

Wir können diese Eigenschaften verwenden, um die entsprechenden Informationen in der Adressleiste zu erhalten, zum Beispiel:

Beispiel: Öffnen Sie auf der CSDN-Homepage unsere Entwicklertools -> Konsole, geben Sie „Standort“ ein, und viele Eigenschaften und Rückgabewerte des Standortobjekts werden angezeigt:

Oder wir können die entsprechenden Attribute direkt in der Konsole eingeben, um den entsprechenden Rückgabewert zu erhalten.

Beispielsweise erzeugen wir jetzt einen Effekt, der durch das Klicken auf eine Schaltfläche zum Springen auf die Seite bewirkt:

<Text>
    <button>Springen</button>
    <div></div>
    <Skript>
        var btn = document.querySelector('Schaltfläche');
        var div = document.querySelector('div');
        var Timer = 5;
        btn.addEventListener('klicken',Funktion(){
           Zeit()
        })

       var Zeit = setzeIntervall(Funktion(){
            wenn(Timer == 0) {
                this.location.href = "https://www.baidu.com"
            }
           anders{
                div.innerHTML = 'Die Seite wird nach '+timer+' Sekunden springen'
                Timer--;
           }
        },1000);
       
    </Skript>
</body>

Die laufenden Ergebnisse sind:

3. Methoden des Standortobjekts

Beispielsweise können wir auch mithilfe der Objektmethode „Standort“ zur Seite springen:

 <button>Klicken zum Springen</button>
    <Skript>
        var btn = document.querySelector('Schaltfläche');
        btn.addEventListener('klicken',Funktion(){
            Standort.assign('https://www.baidu.com')
        })
    </Skript>

Der durch location.assign() erreichte Sprung kann eine Seite zurückgehen, location.replace() kann jedoch nicht eine Seite zurückgehen, da sie keinen Verlauf aufzeichnet.

2. Navigator-Objekt

navigator Navigatorobjekt enthält Informationen zum Browser. Es verfügt über viele Eigenschaften, von denen userAgent die am häufigsten verwendete ist. Sie gibt den Wert des user-agent -Headers zurück, der vom Client an den Server gesendet wird.

if((navigator.userAgent.match(/(Telefon|Pad|Pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = ""; //Mobiltelefon} sonst {
    window.location.href = ""; //Computer}

3. Verlaufsobjekt

window Fensterobjekt stellt uns ein history zur Interaktion mit dem Browserverlauf bereit. Dieses Objekt enthält die URLs, die der Benutzer (in einem Browserfenster) besucht hat.

Die drei am häufigsten verwendeten Methoden sind:

Wenn wir beispielsweise zwei Seiten haben und mit einer Schaltfläche vorwärts und rückwärts gehen möchten, können wir die Vorwärtsmethode und die Verlaufsmethode jeweils an die Schaltflächen der beiden Seiten binden, wie unten gezeigt:

<Text>
    <a href="list.html" rel="external nofollow" >Zur Listenseite</a>
    <button>Weiter</button>
    <Skript>
        var btn = document.querySelector('Schaltfläche');
        btn.addEventListener('klicken',Funktion(){
            Geschichte.vorwärts()
        })
    </Skript>
</body>

<Text>
    <a href="index.html" rel="external nofollow" >Zurück zur Hauptseite</a>
    <button>Zurück</button>
    <Skript>
        var btn = document.querySelector('Schaltfläche');
    btn.addEventListener('klicken',Funktion(){
        Geschichte.zurück()
    })
    </Skript>
</body>

Der Effekt ist:

Oder wir können history.go(1) verwenden, um vorwärts zu gehen, und history.go(1) , um zurückzugehen.

Dies ist das Ende dieses Artikels über das BOM- location + das navigator + das history von JavaScript . Weitere verwandte Inhalte zu Standortobjekt + Navigatorobjekt + Verlaufsobjekt finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!