ECMascript ist der Kern von JavaScript, aber wenn JavaScript im Web verwendet wird, ist BOM (Browser -Objektmodell) der eigentliche Kern.
Das Kernobjekt der BOM ist ein Fenster, das eine Instanz des Browsers darstellt.
Im Browser ist das Fensterobjekt sowohl eine Schnittstelle für JavaScript zum Zugriff auf das Browserfenster als auch ein durch ECMAScript angegebener globaler Objekt. Das heißt, jede in einer Webseite definierte Variable, Objekt und Funktion nimmt das Fenster als globales Objekt an.
1. Globaler Bereich
Da Fensterobjekte die Rolle globaler Objekte spielen, werden alle im globalen Bereich deklarierten Objekte, Variablen und Funktionen zu Eigenschaften und Methoden der Fenster.
Es gibt immer noch einen Unterschied zwischen der Definition globaler Variablen und dem Definieren von Attributen für Fensterobjekte: Globale Variablen können nicht durch Löschen gelöscht werden, während Attribute, die auf Fensterobjekten definiert sind, in Ordnung sind.
var Alter = 28; Fenster.Color = "rot"; // In IE <9 wird ein Fehler geworfen, und falsches Löschenfenster. // In IE <9 wird ein Fehler geworfen, und das echte Löschfenster.Color wird in anderen Browsern zurückgegeben. // true alarm (window.age) zurückgeben; // 28 Alert (Fenster.Color); //undefiniert
Beim Hinzufügen von Fensterattributen mit VAR -Anweisungen gibt es eine Eigenschaft mit dem Namen [[konfigurierbar]]. Der Wert dieser Eigenschaft ist auf False festgelegt, sodass die auf diese Weise definierten Attribute nicht durch Löschen gelöscht werden können.
Wenn Sie versuchen, auf eine nicht deklarierte Variable zuzugreifen, wird ein Fehler geworfen. Wenn Sie jedoch das Fensterobjekt abfragen, können Sie wissen, ob eine mögliche nicht deklarierte Variable vorhanden ist.
// Der Fehler wird hierher geworfen, weil OldValue Var NewValue nicht deklariert = oldValue; // Der Fehler wird hier nicht geworfen, da es sich um eine Eigenschaftsabfrage var newValue = window.oldValue // alarm (newValue); //undefiniert
Tatsächlich sind viele globale JavaScript -Objekte wie Lokalion und Navigation tatsächlich Eigenschaften von Fensterobjekten.
2. Fensterbeziehung und Framework
Wenn die Seite Frames enthält, hat jeder Frame ein eigenes Fensterobjekt und wird in der Rahmensammlung gespeichert.
In einer Frame -Sammlung kann auf einen numerischen Index oder einen Frame -Namen zugegriffen werden.
<html> <Head> <title> Frameset Beispiel </title> </head> <Frameset rows = "160,*"> <Frame Src = "Frame.htm" name = "topFrame"> <Frameset cols = "50%, 50%"> <Frame Src = "AnotherFrame.htm" name = " name = "rightFrame"> </salma
In diesem Beispiel kann auf das obige Framework über window.frames [0] oder window.frames ["Topframe"] verwiesen werden. Es ist jedoch am besten, Top.Frames [0] zu verwenden, um auf das Framework zuzugreifen.
Das Top -Objekt zeigt immer auf das höchste (äußere) Schicht -Framework, dh das Browserfenster. Wenn Sie es verwenden, wird sichergestellt, dass in einem Frame ein anderer Rahmen korrekt zugegriffen wird.
Ein weiteres Fensterobjekt, das dem Top -Objekt entgegengesetzt ist, ist übergeordnet. Das übergeordnete Objekt zeigt immer auf das direkte obere Framework des aktuellen Frameworks.
Es gibt auch ein Selbstobjekt , das immer auf Fenster zeigt. Tatsächlich kann Selbst und Fenster miteinander verwendet werden. Der Zweck der Einführung von Selbstobjekten besteht nur darin, Top- und Elternobjekten zu entsprechen.
Alle diese Objekte sind Eigenschaften des Fensters und können mit Fenster oder Fenster oder Fenster verwendet werden.
3. Fensterstandort
Die meisten Browser liefern ScreenLeft und Screentop, mit denen die Position des Fensters relativ zur linken und oberen Seite des Bildschirms dargestellt wird. FF liefert die gleichen Fensterinformationen in den Eigenschaften von ScreenX und Screeny, und die Safari -Menge Chorme unterstützt diese beiden Eigenschaften gleichzeitig.
Verwenden Sie den folgenden Code, um die linken und oberen Position des Fensters über den Browser zu erhalten.
var Leftpos = (Typeof Window.screenleft == "Nummer")? Fenster.ScreenLeft: Window.screenX; var toppos = (typeof window.screentop == "number")? window.screentop: window.screeny;
Es ist erwähnenswert, dass in IE und Opera, ScreenLeft und Screentop den Abstand von der linken und oberen Seite des Bildschirms bis zum sichtbaren Bereich der Seite speichern, das vom Fensterobjekt dargestellt wird. In Chrome, FF und Safari speichern Screeny und Screentop die Koordinatenwerte des gesamten Browsers auf dem Bildschirm.
Das Endergebnis besteht
Mit den Methoden Moveto () und Moveby () kann das Fenster genau auf die neue Position verschoben werden. Beide Methoden empfangen zwei Parameter. MoveTo () empfängt die Koordinaten der X- und Y -Achse und MoveBy () die sich bewegenden Pixel.
// Bewegen Sie den Bildschirm nach obere linke MoveTo (0,0); // Verschieben Sie das von 50px MoveBy (-50,0) links links links links links links linke Fenster;
Diese beiden Methoden können jedoch vom Browser deaktiviert werden. Diese beiden Methoden sind nur für das äußerste Fensterobjekt anwendbar und nicht für Frameworks anwendbar.
4. Fenstergröße
Mainstream -Browser liefern 4 Eigenschaften zur Bestimmung der Fenstergröße: Innerwidth, Innerhight, Oterwidth und OuterHight.
In IE9+, Safari und FF, äußererbreite und äußere Hight geben die Größe des Browserfensters selbst zurück (unabhängig vom Zugriff, aus welchem Framework). In Opera repräsentieren die Werte dieser beiden Eigenschaften jedoch die Größe des Seitenansichtsbehälters (die Größe eines einzelnen Registerkartenfensters). InnereWidth und Innerhight repräsentieren die Größe der Seitenansicht im Container (abzüglich der Breite des Randes). In Chrome repräsentieren diese 4 Eigenschaften jedoch alle die Ansichtsfenstergröße und nicht die Browsergröße.
IE9 hat die Attribute nicht zur Verfügung gestellt, um die Browser -Fenstergröße zuvor zu erhalten. Es enthält jedoch Informationen über den visuellen Bereich der Seite über das DOM.
In IE, FF, Chrome, Opera und Safari werden die Informationen zum Ansichtsfenster in document.documentElement.clientwidth und document.documentElement.clientHight gespeichert. In IE6 muss es im Standardmodus wirksam sein. Wenn es sich um einen Promiscuous -Modus handelt, müssen dieselben Informationen über document.body.clientwidth und document.body.clientHight erhalten werden. Chrome unterscheidet nicht zwischen Standardmodus oder gemischtem Modus.
Obwohl die Größe des Browserfensters selbst nicht ermittelt werden kann, kann die Größe des Seitenansichtsfensters erhalten werden.
var pagewidth = window.innnerwidth, pageHeight = window.innerHeight; if (typeof pagewidth! pageHeight = document.documentElement.clientHeight; } else {pagewidth = document.body.clientwidth; pageHeight = document.body.clientHeight; }} alert ("width:" + pagewidth); alert ("Höhe:" + pageHeight);Für mobile Geräte, window.innerwidth und window.innerhight halten Sie das sichtbare Ansichtsfenster, das die Größe des Seitenbereichs auf dem Bildschirm hat. Mobile IE -Browser müssen dieselben Informationen über document.documentElement.clientwidth und document.documentElement.clientHight erhalten.
Sowohl die Methoden resizeto () als auch resizeBy () können verwendet werden, um die Größe des Browserfensters anzupassen. Beide Methoden empfangen zwei Parameter. Resizeto () erhält die neue Breite und die neue Höhe des Browserfensters und den Größen () den Unterschied und den Höhenunterschied zwischen dem neuen Fenster und dem alten Fenster.
// Einstellen auf 100*100 Resizeto (100.100); // Einstellen auf 200*150 MoveBy (100,50);
Diese beiden Methoden können jedoch vom Browser deaktiviert werden. Diese beiden Methoden sind nur für das äußerste Fensterobjekt anwendbar und nicht für Frameworks anwendbar.
5. Navigieren und Öffnen von Fenstern
Die Methode window.open () kann entweder eine bestimmte URL oder ein neues Browserfenster öffnen. Diese Methode empfängt 4 Parameter: URL, Fensterziel, eine Feature -Zeichenfolge und ein boolescher Wert, der angibt, ob die neue Seite die aktuelle Seite ersetzt.
auftauchen
Verschiedene Parameter
Unter ihnen kann Ja/Nein auch 1/0 verwendet werden; PixelValue ist ein spezifischer Wert, Einheitspixel.
Parameter | Wertebereich | Beschreibung
Immer gesenkt | Ja/Nein | Angeben Sie die Fenster an, die hinter allen Fenstern versteckt sind
Immer aufgebraucht | Ja/Nein | Angeben von Fenstern, die über alle Fenster suspendiert sind
abhängig | Ja/Nein | Ob das übergeordnete Fenster gleichzeitig geschlossen ist
Verzeichnisse | Ja/Nein | Sind die Verzeichnisspalten von NAV2 und 3 sichtbar?
Höhe | Pixelvalue | Fensterhöhe
Hotkeys | Ja/Nein | Setzen Sie einen sicheren Hotkey im Fenster ohne Menüleiste
Innerheight | pixelvalue | Pixelhöhe des Dokuments im Fenster
Innerwidth | Pixelvalue | Pixelwidth des Dokuments im Fenster
Ort | Ja/Nein | Ist die Standortleiste sichtbar?
Menubar | Ja/Nein | Ist die Menüleiste sichtbar?
äußereheight | pixelvalue | Setzen Sie die Pixelhöhe des Fensters (einschließlich dekorativer Grenzen)
Oterwidth | Pixelvalue | setzt die Pixelbreite des Fensters (einschließlich dekorativer Grenzen)
Resizierbar | Ja/Nein | Ist die Fenstergröße einstellbar?
ScreenX | PixelValue | Pixelle Länge des Fensters zum linken Rand des Bildschirms
Screeny | Pixelvalue | Pixelle Länge des Fensters zur oberen Grenze des Bildschirms
Scrollbars | Ja/Nein | Ob im Fenster eine Scrollbar ist
Titellebar | Ja/Nein | Ist die Fenstertitelspalte sichtbar?
Symbolleiste | Ja/Nein | Ist die Fenster -Symbolleiste sichtbar?
Breite | PixelValue | Fensterpixelbreite
Z-Look | Ja/Nein | Ob das Fenster nach dem Aktivieren in anderen Fenstern schwimmt
Beispiel:
window.open ('page.html', 'newWindow', 'height = 100, width = 400, top = 0, links = 0, Symbolleiste = nein, Menubar = nein, scrollBars = nein, resizable = nein, locum = no, status = no')Nachdem das Skript ausgeführt wurde, wird Page.html in der neuen Form NewWindow mit einer Breite von 100, einer Höhe von 400, 0 Pixel vom oberen Rand des Bildschirms, 0 Pixel von links vom Bildschirm, keine Symbolleiste, keine Menüleiste, keine Scroll -Bar, keine Größenänderung, keine Adressleiste und keine Statusleiste geöffnet.
6. Intermittierende Anrufe und Zeitlimitanrufe
JavaScript ist eine einzelne Sprache, die jedoch die Planungscodeausführung in einem bestimmten Zeitpunkt durch Festlegen des Zeitüberschreitungswerts und der Intervallzeit ermöglicht. Ersteres führt den Code nach der angegebenen Zeit aus, während letzteres für jede angegebene Zeit einmal aufgerufen wird.
Timeout Call setTimeout ()
Die SetTimeOut () -Methode akzeptiert zwei Parameter, der erste Parameter ist eine Funktion, und der zweite Parameter ist Zeit (Einheiten von Mikrosekunden), die die numerische ID zurückgibt.
setTimeout (function () {alert ("Hallo!");}, 1000);Nach dem Aufrufen von setTimeout () gibt die Methode eine numerische ID zurück, wobei der Timeout -Anruf angezeigt wird, und der Timeout -Anruf kann abgebrochen werden.
var timeoutID = setTimeout (function () {alert ("Hallo!");}, 1000); Clearimeout (TimeoutID);Intermittierender Anruf setInterval ()
Die Methode setInterval () akzeptiert zwei Parameter, der erste Parameter ist eine Funktion, der zweite Parameter ist Zeit (Einheitsmikrosekunden) und gibt die numerische ID zurück
setInterval (function () {alert ("Hallo!");}, 1000);Stornieren Sie den Aufruf an ClearInterval () und akzeptieren Sie einen Parameter intermittierenden Anruf -ID
var intervalid = null; var span = document.createelement ("span"); // Span Span Node span.id = "Zeit"; // Setzen Sie das Span -ID -Dokument.body.AppendChild (span); // Span Function Incrementnumber () {var nun = new Date (); var timestr = now.tolocaletimestring (); span.inNertext = Timestr; num ++; if (num == 10) {ClearInterval (Intervalid); // Die Zeit bleibt nach zehn Sekunden unverändert}} interalid = setInterval (Incrementnumber, 1000);Versuchen Sie, Timeout -Anrufe anstelle von zeitstricksziellen Aufrufen zu verwenden
var num = 0; var max = 10; Funktion IncrementNumber () {num ++; if (num <max) {setTimeout (IncrementNumber, 1000); } else {alert ("ok"); }} setTimeout (IncrementNumber, 1000);7. Systemdialogfeld
Warnbox Alert ()
Alarm ("Willkommen!");Das Informationsfeld Bestätigung () hat eine Abbrechenschaltfläche
if (bestätigen ("stimmen Sie zu?") {alert ("Vereinbarung"); } else {alert ("nicht zustimmen"); }Fordert () und fordert den Benutzer dazu auf, einen Text einzugeben
var result = prompt ("Sie respektieren Ihren Nachnamen?", ""); if (result! == null) {alert ("Willkommen" +Ergebnis); }Die obige detaillierte Erläuterung des BOM (Fensterobjekts) in JavaScript ist der gesamte Inhalt, der vom Editor geteilt wird. Ich hoffe, es kann Ihnen eine Referenz geben und ich hoffe, Sie können Wulin.com mehr unterstützen.