Detaillierte Erläuterung des Beispielcodes für ein JavaScript-Browserobjekt

JavaScript kann viele vom Browser bereitgestellte Objekte abrufen und Vorgänge ausführen. Dieser Artikel führt Sie in die relevanten Kenntnisse über Browserobjekte in JavaScript ein. Werfen wir einen Blick darauf.

JavaScript kann viele vom Browser bereitgestellte Objekte abrufen und bedienen.

window

Das Fensterobjekt fungiert nicht nur als globaler Bereich, sondern repräsentiert auch das Browserfenster.

Das Fensterobjekt verfügt über die Eigenschaften innerWidth und innerHeight, mit denen die interne Breite und Höhe des Browserfensters ermittelt werden kann. Die interne Breite und Höhe bezieht sich auf die Nettobreite und -höhe, die zum Anzeigen der Webseite verwendet wird, nachdem Platzhalterelemente wie Menüleisten, Symbolleisten und Rahmen entfernt wurden.

Kompatibilität: IE<=8 wird nicht unterstützt.

// 可以调整浏览器窗口大小试试:
alert('window inner size: ' + window.innerWidth + ' x ' + window.innerHeight);

Entsprechend gibt es auch die Attribute „outerWidth“ und „outerHeight“, mit denen die gesamte Breite und Höhe des Browserfensters ermittelt werden kann.

Navigator

Navigatorobjekt stellt Browserinformationen dar. Zu den am häufigsten verwendeten Attributen gehören:

• navigator.appName: Browsername;

• navigator.appVersion: Browserversion; 🎜>

  navigator.sprache: Die vom Browser festgelegte Sprache

• navigator.platform: Betriebssystemtyp;

• navigator.userAgent: Vom Browser festgelegte User-Agent-Zeichenfolge.
Bitte beachten Sie, dass die Informationen des Navigators vom Benutzer leicht geändert werden können, sodass der von JavaScript gelesene Wert nicht unbedingt korrekt ist. Um unterschiedliche Codes für verschiedene Browser zu schreiben, verwenden viele Anfänger gerne if, um die Browserversion zu ermitteln, z schwierig, den Code zu pflegen. Die richtige Methode besteht darin, die JavaScript-Funktion zur Rückgabe undefinierter Eigenschaften für nicht vorhandene Eigenschaften vollständig zu nutzen und den Kurzschlussoperator || direkt zu verwenden, um Folgendes zu berechnen:

alert('appName = ' + navigator.appName + '\n' +
   'appVersion = ' + navigator.appVersion + '\n' +
   'language = ' + navigator.language + '\n' +
   'platform = ' + navigator.platform + '\n' +
   'userAgent = ' + navigator.userAgent);

var width;
if (getIEVersion(navigator.userAgent) < 9) {
  width = document.body.clientWidth;
} else {
  width = window.innerWidth;
}

screen

var width = window.innerWidth || document.body.clientWidth;

Bildschirmobjekt
stellt Bildschirminformationen dar:

screen.width : Bildschirmbreite, in Pixel Einheit;

screen.height: Bildschirmhöhe, in Pixel
screen.colorDepth: Gibt die zurück Anzahl der Farbziffern, z. B. 8, 16, 24.

• Standort

alert('Screen size = ' + screen.width + ' x ' + screen.height);

Standortobjekt stellt die URL-Informationen der aktuellen Seite dar . Beispielsweise kann eine vollständige URL: http://www.example.com:8080/path/index.html?a=1&b=2#TOP

mit Standort abgerufen werden. href . Um den Wert jedes Teils der URL zu erhalten, können Sie schreiben:

Um eine neue Seite zu laden, können Sie location.assign() aufrufen. Wenn Sie die aktuelle Seite neu laden möchten, ist es sehr praktisch, die Methode location.reload() aufzurufen.

location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'

Dokument

if (confirm('重新加载当前页' + location.href + '?')) {
  location.reload();
} else {
  location.assign('/discuss'); // 设置一个新的URL地址
}

Das Dokumentobjekt repräsentiert die aktuelle Seite. Da HTML im Browser als Baumstruktur in Form von DOM dargestellt wird, ist das Dokumentobjekt der Wurzelknoten des gesamten DOM-Baums. Das Titelattribut des Dokuments wird aus im HTML-Dokument gelesen, kann aber dynamisch geändert werden:

Bitte beachten Sie den Titel des Änderung des Browserfensters.

Um einen Knoten im DOM-Baum zu finden, müssen Sie die Suche vom Dokumentobjekt aus starten. Die am häufigsten verwendeten Suchvorgänge basieren auf ID und Tag-Name.

document.title = '努力学习JavaScript!';

Wir bereiten zunächst die HTML-Daten vor:

Verwenden Sie getElementById() und
getElementsByTagName

(), die vom Dokumentobjekt bereitgestellt werden, um einen DOM-Knoten abzurufen ID und Erhalt einer Reihe von DOM-Knoten entsprechend dem Tag-Namen:

<dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;">
  <dt>摩卡</dt>
  <dd>热摩卡咖啡</dd>
  <dt>酸奶</dt>
  <dd>北京老酸奶</dd>
  <dt>果汁</dt>
  <dd>鲜榨苹果汁</dd>
</dl>

Mokka

Hot Mocha CoffeeYoghurtPeking Old Yoghurt

Juice

var menu = document.getElementById('drink-menu');
var drinks = document.getElementsByTagName('dt');
var i, s, menu, drinks;

menu = document.getElementById('drink-menu');
menu.tagName; // 'DL'

drinks = document.getElementsByTagName('dt');
s = '提供的饮料有:';
for (i=0; i<drinks.length; i++) {
  s = s + drinks[i].innerHTML + &#39;,&#39;;
}
alert(s);

Frisch gepresster Apfel Saft

Das Dokumentobjekt verfügt auch über ein Cookie-Attribut, das das Cookie der aktuellen Seite abrufen kann.

Cookie ist eine vom Server gesendete Schlüsselwertkennung. Da das HTTP-Protokoll zustandslos ist, kann der Server mithilfe von Cookies unterscheiden, welcher Benutzer die Anforderung gesendet hat. Wenn sich ein Benutzer erfolgreich anmeldet, sendet der Server ein Cookie an den Browser, z. B. user=ABC123XYZ (verschlüsselte Zeichenfolge)... Wenn der Browser anschließend die Website besucht, hängt er dieses Cookie an den Anforderungsheader an und die Der Server verwendet das Cookie, anhand dessen Benutzer unterschieden werden können.

Cookies können auch einige Einstellungen der Website speichern, wie z. B. die auf der Seite angezeigte Sprache usw.

JavaScript kann das Cookie der aktuellen Seite über document.cookie lesen:

Da JavaScript das Cookie der Seite lesen kann, werden in der Regel auch die Anmeldeinformationen des Benutzers gespeichert Cookie. Dies stellt ein großes Sicherheitsrisiko dar, da es erlaubt ist, JavaScript-Code von Drittanbietern in HTML-Seiten einzuführen:

Wenn das eingeführte JavaScript von Drittanbietern schädlichen Code enthält, www Die .com-Website erhält direkt die

Benutzeranmeldeinformationen

document.cookie; // 'v=123; remember=true; prefer=zh'

der Website www.example.com.

Um dieses Problem zu lösen, kann der Server beim Setzen von Cookies httpOnly verwenden. Cookies, die auf httpOnly gesetzt sind, werden von JavaScript nicht gelesen. Dieses Verhalten wird vom Browser implementiert. Alle gängigen Browser unterstützen die Option httpOnly, und IE unterstützt sie ab IE6 SP1.

Um die Sicherheit zu gewährleisten, sollte der Server beim Setzen von Cookies immer darauf bestehen, httpOnly zu verwenden.

history

history object speichert den Verlauf des Browsers, der back() des History-Objekts aufrufen kann oder vorwärts (), was dem Klicken des Benutzers auf die Schaltfläche „Zurück“ oder „Vorwärts“ des Browsers entspricht.

Bei diesem Objekt handelt es sich um ein historisches Legacy-Objekt. Aufgrund der umfangreichen Verwendung von AJAX und der Seiteninteraktion kann ein einfacher und grober Aufruf von „history.back()“ Benutzer sehr verärgern.

Wenn Anfänger mit dem Entwerfen von Webseiten beginnen, rufen sie gerne History.back() auf, wenn die Anmeldeseite erfolgreich angemeldet ist, und versuchen, vor der Anmeldung zur Seite zurückzukehren. Das ist ein falscher Ansatz.

Sie sollten das History-Objekt unter keinen Umständen verwenden.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Beispielcodes für ein JavaScript-Browserobjekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!