Drei BOM-Objekte in JavaScript

Das Fensterobjekt stellt uns eine Standorteigenschaft zum Abrufen oder Festlegen der 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 Standortobjekt.

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, aber location.replace() zeichnet keinen Verlauf auf und kann daher nicht eine Seite zurückgehen.

2. Navigator-Objekt

Das Navigatorobjekt enthält Informationen zum Browser. Es verfügt über viele Eigenschaften, von denen userAgent die am häufigsten verwendete ist. Es 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

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:

index.html

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

list.html

<Text>
    <a href="index.html">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.

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!