JavaScript-Fenster – Browser-Objektmodell

JavaScript-Fenster – Browser-Objektmodell
Das Browser-Objektmodell (BOM) gibt JavaScript die Möglichkeit, mit dem Browser zu „sprechen“.



Fensterobjekt
Alle Browser unterstützen das Fensterobjekt. Es stellt das Browserfenster dar.
Alle globalen JavaScript-Objekte, -Funktionen und -Variablen werden automatisch Mitglieder des Fensterobjekts.
Globale Variablen sind Eigenschaften des Fensterobjekts.
Globale Funktionen sind Methoden des Fensterobjekts.

Sogar das Dokument des HTML-DOM ist eine der Eigenschaften des Fensterobjekts:
window.document.getElementById("header");
Das Gleiche:
document.getElementById ("header" );



Fenstergröße
Es gibt drei Möglichkeiten, die Größe des Browserfensters zu bestimmen (das Ansichtsfenster des Browsers, ohne Symbolleisten und Bildlaufleisten).
Für Internet Explorer, Chrome, Firefox, Opera und Safari:
window.innerHeight – die innere Höhe des Browserfensters
window.innerWidth – die innere Breite des Browserfensters
Für Internet Explorer 8 , 7 , 6, 5:
document.documentElement.clientHeight
document.documentElement.clientWidth
oder
document.body.clientHeight
document.body.clientWidth

Praktisch JavaScript-Lösung (deckt alle Browser ab):
var w=window.innerWidth
||. document.documentElement.clientWidth
||
||. document.documentElement.clientHeight



Andere Fenstermethoden
window.open() – Öffne ein neues Fenster
window.close() – Aktuelles Fenster schließen
window.moveTo() – Aktuelles Fenster verschieben
window.resizeTo() – Größe des aktuellen Fensters anpassen



Fensterbildschirm
Das window.screen-Objekt enthält Informationen über den Bildschirm des Benutzers.

Einige Eigenschaften:
screen.availWidth – verfügbare Bildschirmbreite (Eigenschaft gibt die Breite des Besucherbildschirms in Pixel zurück, abzüglich Schnittstellenfunktionen wie der Fenster-Taskleiste.)
screen.availHeight – Verfügbar Bildschirmhöhe (Eigenschaft gibt die Höhe des Besucherbildschirms in Pixel zurück, abzüglich Schnittstellenfunktionen wie der Fenster-Taskleiste.)



Window Location
window.location-Objekt Wird verwendet, um die zu erhalten Adresse (URL) der aktuellen Seite und leitet den Browser auf eine neue Seite weiter.

location.hostname gibt den Domänennamen des Webhosts zurück
location.pathname gibt den Pfad und Dateinamen der aktuellen Seite zurück
location.port gibt den Port (80 oder 443) des Webs zurück host
location.protocol Gibt das verwendete Webprotokoll zurück (http:// oder https://). Das Attribut
location.href gibt die URL der aktuellen Seite zurück.
Die Methode location.assign() lädt ein neues Dokument.

Beispiel:
<script> <br></script> :// www.w3school.com.cn/js/js_window_location.asp


Der Unterschied zwischen location.assign und location.replace
window.location.assign(url): Neues HTML laden durch das URL-Dokument angegeben. Dies entspricht einem Link, der zur angegebenen URL springt.
Die aktuelle Seite wird in den neuen Seiteninhalt konvertiert. Sie können auf „Zurück“ klicken, um zur vorherigen Seite zurückzukehren.

window.location.replace(url): Ersetzen Sie das aktuelle Dokument, indem Sie das durch die URL angegebene Dokument laden.
Die beiden Seiten davor und danach haben dasselbe Es gibt also kein Zurück und Zurück zur vorherigen Seite.



Fensterverlauf
history.back() – Identisch mit dem Klicken auf die Zurück-Schaltfläche im Browser (lädt die vorherige URL in der Verlaufsliste.)
history.forward( ) – Identisch mit dem Klicken auf die Schaltfläche „Vorwärts“ im Browser (lädt die nächste URL in der Verlaufsliste.)



Window Navigator Das window.navigator-Objekt enthält Informationen über die Browserinformationen des Besuchers.



JavaScript-Meldungsfeld
Erstellen Sie drei Arten von Meldungsfeldern in JavaScript: Warnfeld, Bestätigungsfeld und Eingabeaufforderungsfeld.

Warnfeld
Wenn das Warnfeld angezeigt wird, muss der Benutzer auf die Schaltfläche „OK“ klicken, um den Vorgang fortzusetzen.
Syntax:
alert("text")


Bestätigungsfeld
Wenn das Bestätigungsfeld angezeigt wird, muss der Benutzer auf die Schaltfläche „OK“ oder „Abbrechen“ klicken, um den Vorgang fortzusetzen.
Wenn der Benutzer zur Bestätigung klickt, ist der Rückgabewert wahr. Wenn der Benutzer auf Abbrechen klickt, ist der Rückgabewert falsch.

Syntax:
confirm("text")

Beispiel:



Eingabeaufforderungsfeld
Wenn das Eingabeaufforderungsfeld angezeigt wird, muss der Benutzer dies tun Geben Sie einen bestimmten Wert ein und klicken Sie dann auf die Schaltfläche „Bestätigen“ oder „Abbrechen“, um den Vorgang fortzusetzen.
Wenn der Benutzer zur Bestätigung klickt, ist der Rückgabewert der eingegebene Wert. Wenn der Benutzer auf „Abbrechen“ klickt, ist der Rückgabewert null.

Syntax:
prompt("text","default value")

Beispiel:




JavaScript Timing
Durch die Verwendung von JavaScript haben wir die Möglichkeit, Code nach einem festgelegten Intervall
auszuführen, anstatt unmittelbar nach dem Aufruf der Funktion. Wir nennen dies ein Timing-Ereignis.

setTimeout()
Syntax
var t=setTimeout("javascript-Anweisung", Millisekunden)
Der erste Parameter ist eine Zeichenfolge, die eine JavaScript-Anweisung enthält. Diese Anweisung kann beispielsweise „alert('5 seconds!')“ oder ein Aufruf einer Funktion sein

Beispiel: (Endlosschleife)



clearTimeout()
Syntax
clearTimeout(setTimeout_variable) //setTimeout_variable ist als es erstellt wurde Timer-Referenz (Variable)

Beispiel:
function stopCount()
{
clearTimeout(t)
}



JavaScript-Cookies
Ein Cookie ist eine Variable, die auf dem Computer des Besuchers gespeichert wird. Dieses Cookie wird jedes Mal gesendet, wenn derselbe Computer eine Seite über einen Browser anfordert.
Sie können JavaScript verwenden, um Cookie-Werte zu erstellen und abzurufen.

Cookies werden in Form von Schlüssel-Wert-Paaren gespeichert, also im Format Schlüssel=Wert. Jedes Cookie wird normalerweise durch „;“ getrennt.
document.cookie = "name=value;expires=date;path=path"
document.cookie = "username=Darren;path=/;domain=qq.com"

Erstellen und Cookies speichern
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie= c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

Cookies lesen
function getCookie(c_name)
{
if (document.cookie.length>0) //Überprüfen Sie, ob im document.cookie-Objekt ein Cookie vorhanden ist
{
c_start=document.cookie. indexOf (c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";", c_start )
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return " "
}


Gültigkeitsdauer von Cookies festlegen
Standardmäßig werden Cookies automatisch gelöscht, wenn der Browser geschlossen wird, wir können die Gültigkeitsdauer von Cookies jedoch bis zum Ablauf festlegen.
document.cookie = "name=value;expires=date"