ECMascript est le cœur de JavaScript, mais lors de l'utilisation de JavaScript dans le Web, BOM (Browser Object Model) est le véritable noyau.
L'objet central de BOM est Window, qui représente une instance du navigateur.
Dans le navigateur, l'objet Window est à la fois une interface pour JavaScript pour accéder à la fenêtre du navigateur et à un objet global spécifié par ECMascript. C'est-à-dire que toute variable, objet et fonction définis dans une page Web prend la fenêtre comme son objet global.
1. Portée mondiale
Étant donné que les objets de fenêtre jouent le rôle des objets globaux, tous les objets, variables et fonctions déclarés dans la portée globale deviendront des propriétés et des méthodes de fenêtres.
Il y a toujours une différence entre la définition des variables globales et la définition des attributs sur les objets de fenêtre: les variables globales ne peuvent pas être supprimées via la suppression, tandis que les attributs définis sur les objets de fenêtre sont OK.
Var âge = 28; window.color = "red"; // Dans IE <9, une erreur est lancée et une fausse fenêtre de suppression.age est renvoyée dans d'autres navigateurs; // Dans IE <9, une erreur est lancée et True Delete Window.color est renvoyé dans d'autres navigateurs; // retourne True Alert (Window.age); // 28 alerte (fenêtre.color); //indéfini
Lors de l'ajout d'attributs de fenêtre à l'aide des instructions VAR, il existe une propriété nommée [[configurable]]. La valeur de cette propriété est définie sur False, de sorte que les attributs définis de cette manière ne peuvent pas être supprimés par Supprimer.
Une erreur sera lancée lorsque vous essayez d'accéder à une variable non déclarée, mais en interrogeant l'objet Window, vous pouvez savoir s'il existe une variable non déclaré possible.
// L'erreur est lancée ici parce que OldValue ne déclare pas var newValue = OldValue; // L'erreur n'est pas lancée ici car il s'agit d'une question de propriété var newValue = window.oldValue // alert (newValue); //indéfini
En fait, de nombreux objets JavaScript mondiaux tels que la localité et la navigation sont en fait des propriétés des objets de fenêtre.
2. Relation et cadre de fenêtre
Si la page contient des cadres, chaque trame a son propre objet de fenêtre et est enregistré dans la collection Frames.
Dans une collection de trame, il est accessible via un index numérique ou un nom de trame.
<Html> <A-head> <itle> Exemple de FrameSet </ title> </ head> <frameset rows = "160, *"> <frame src = "frame.htm" name = "topframe"> <frameset cols = "50%"> <frame src = "autre name = "droiteframe"> </ frameset> </ frameset> </html>
Pour cet exemple, le framework ci-dessus peut être référencé par Window.frames [0] ou Window.frames ["topframe"]. Cependant, il est préférable d'utiliser TOP.frames [0] pour accéder au cadre.
L'objet supérieur pointe toujours vers le cadre de couche le plus élevé (extérieur), c'est-à-dire la fenêtre du navigateur. L'utiliser garantit qu'une autre trame est correctement accessible dans une seule trame.
Un autre objet de fenêtre opposé à l'objet supérieur est le parent, l'objet parent pointe toujours vers le cadre supérieur direct du cadre actuel.
Il y a aussi un objet d'auto , qui pointe toujours vers la fenêtre. En fait, le soi et la fenêtre peuvent être utilisés entre eux. Le but d'introduire des objets auto est uniquement pour correspondre aux objets supérieurs et parents.
Tous ces objets sont des propriétés de la fenêtre et peuvent être utilisés avec Window.Parent ou Window.top.
3. Emplacement de la fenêtre
La plupart des navigateurs fournissent un script et un screenop, qui sont utilisés pour représenter la position de la fenêtre par rapport au côté gauche et supérieur de l'écran, respectivement. FF fournit les mêmes informations de fenêtre dans les propriétés ScreenX et Screeny, et Safari Montant Chorme prend également en charge ces deux propriétés en même temps.
Utilisez le code suivant pour obtenir les positions gauche et supérieure de la fenêtre à travers le navigateur.
var LeftPos = (typeof window.screenleft == "nombre")? window.screenleft: window.screenx; var toppos = (typeof window.screentop == "nombre")? window.screentop: window.screeny;
Il convient de noter que dans IE et Opera, ScreenLeft et ScreenTop, économisez la distance de la partie gauche et supérieure de l'écran à la zone visible de la page représentée par l'objet Window. Dans Chrome, FF et Safari, Screeny et ScreenTop, enregistrez les valeurs de coordonnées de l'ensemble du navigateur à l'écran.
Le résultat final est que les valeurs de coordonnées exactes sur le côté gauche et supérieur de la fenêtre ne peuvent pas être obtenues dans des conditions de croisement.
En utilisant des méthodes moveto () et movy (), la fenêtre peut être déplacée avec précision vers la nouvelle position. Les deux méthodes reçoivent deux paramètres. MoveTo () reçoit les coordonnées de l'axe x et y, et Moveby () reçoit les pixels en mouvement.
// déplacez l'écran vers le MOVETO supérieur gauche (0,0); // déplace la fenêtre à gauche par 50px moveby (-50,0);
Cependant, ces deux méthodes peuvent être désactivées par le navigateur. Ces deux méthodes ne sont applicables qu'à l'objet de fenêtre le plus externe et ne sont pas applicables aux cadres.
4. Taille de la fenêtre
Les navigateurs traditionnels fournissent 4 propriétés pour déterminer la taille de la fenêtre: insert, intérieur, largeur extérieure et extérieur.
Dans IE9 +, Safari et FF, la largeur extérieure et la vigueur renvoient la taille de la fenêtre du navigateur lui-même (quel que soit l'accès à partir du cadre), mais dans l'opéra, les valeurs de ces deux propriétés représentent la taille du conteneur de la vue de la page (la taille d'une seule fenêtre d'onglet). L'interWidth et l'Innerhight représentent la taille de la vue de la page dans le conteneur (moins la largeur de la bordure). Mais dans Chrome, ces 4 propriétés représentent toutes la taille de la fenêtre plutôt que la taille du navigateur.
IE9 n'a pas fourni les attributs pour obtenir la taille de la fenêtre du navigateur avant; Cependant, il fournit des informations sur la zone visuelle de la page via le DOM.
Dans IE, FF, Chrome, Opera et Safari, les informations de la fenêtre de page sont stockées dans document.DocumentElement.ClientWidth et Document.DocumentElement.ClientHight. Dans IE6, il doit être efficace en mode standard. S'il s'agit d'un mode promiscuité, les mêmes informations doivent être obtenues via document.body.clientwidth et document.body.clienthight. Chrome ne fait pas de distinction entre le mode standard ou le mode mixte.
Bien que la taille de la fenêtre du navigateur elle-même ne puisse pas être déterminée à la fin, la taille de la fenêtre de page peut être obtenue.
var pageWidth = window.innerwidth, pageHeight = window.innerHeight; if (typeof pageWidth! = "Number") {if (document.compatMode == "CSS1Compat") {pageWidth = document.DocumentElement.ClientWidth; PageHeight = document.DocumentElement.ClientHeight; } else {pagewidth = document.body.clientwidth; pageHeight = document.body.clientHeight; }} alert ("width:" + pagewidth); alert ("hauteur:" + pageHeight);Pour les appareils mobiles, Window.innerwidth et Window.innerHight Tenez la fenêtre visible, qui est de la taille de la zone de la page à l'écran. Les navigateurs mobiles IE doivent obtenir les mêmes informations via document.DocumentElement.ClientWidth et Document.DocumentElement.ClientHight.
Les méthodes Resizeto () et ResizeBy () peuvent être utilisées pour ajuster la taille de la fenêtre du navigateur. Les deux méthodes reçoivent deux paramètres. Resizeto () reçoit la nouvelle largeur et la nouvelle hauteur de la fenêtre du navigateur, et ResizeBy () reçoit la différence de largeur et la différence de hauteur entre la nouvelle fenêtre et l'ancienne fenêtre.
// Ajuster à 100 * 100 resizeto (100 100); // s'adapter à 200 * 150 Moveby (100,50);
Cependant, ces deux méthodes peuvent être désactivées par le navigateur. Ces deux méthodes ne sont applicables qu'à l'objet de fenêtre le plus externe et ne sont pas applicables aux cadres.
5. Naviguer et ouvrir les fenêtres
La méthode Window.Open () peut ouvrir une URL spécifique ou une nouvelle fenêtre de navigateur. Cette méthode reçoit 4 paramètres: URL, cible de fenêtre, une chaîne de fonctionnalités et une valeur booléenne indiquant si la nouvelle page remplace la page actuelle.
surgir
Divers paramètres
Parmi eux, oui / non peut également être utilisé 1/0; PixelValue est une valeur spécifique, des pixels unitaires.
Paramètres | Plage de valeurs | Description
toujours abaissé | Oui / Non | Spécifiez les fenêtres sont cachées derrière toutes les fenêtres
toujours rail | Oui / Non | Spécifiez les fenêtres suspendues sur toutes les fenêtres
dépendait | oui / non | si la fenêtre parent est fermée en même temps
Répertoires | Oui / Non | Les colonnes de répertoire de NAV2 et 3 sont-elles visibles?
hauteur | pixelvalue | hauteur de fenêtre
HOTKEYYS | Oui / Non | Définissez la cure de painte de sortie sûre dans la fenêtre sans barre de menu
Interheight | pixelvalue | Pixel Hauteur du document dans la fenêtre
innerwidth | pixelvalue | pixelwidth du document dans la fenêtre
Emplacement | Oui / Non | La barre d'emplacement est-elle visible?
MenUbar | Oui / Non | La barre de menu est-elle visible?
OUTERHEIGHT | PIXELVALUE | Réglez la hauteur de pixels de la fenêtre (y compris les bordures décoratives)
OUTERWIDTH | PIXELVALUE | Définit la largeur des pixels de la fenêtre (y compris les bordures décoratives)
Resizable | Oui / Non | La taille de la fenêtre est-elle réglable?
ScreenX | PixelValue | Pixelle Longueur de la fenêtre vers le bord gauche de l'écran
Screeny | PixelValue | Pixelle Longueur de la fenêtre à la limite supérieure de l'écran
Crèche | Oui / Non | s'il y a une barre de défilement dans la fenêtre
TitleBar | Oui / Non | La colonne de titre de fenêtre est-elle visible?
barre d'outils | Oui / Non | La barre d'outils de la fenêtre est-elle visible?
Largeur | pixelvalue | largeur de pixel de fenêtre
Z-Look | Oui / Non | Si la fenêtre flotte sur d'autres fenêtres après son activation
Exemple:
window.open ('page.html', 'Newwindow', 'height = 100, width = 400, top = 0, Left = 0, toolbar = no, menuBar = no, scrollbars = no, resizable = no, location = no, status = no')Une fois le script exécuté, Page.html sera ouvert dans le nouveau formulaire Newwindow, avec une largeur de 100, une hauteur de 400, 0 pixels en haut de l'écran, 0 pixels de la gauche de l'écran, pas de barre d'outils, pas de barre de menu, pas de barre de défilement, pas de résumé, pas de barre d'adresse et pas de barre d'état.
6. appels intermittents et appels de délai
JavaScript est un langage unique, mais il permet l'exécution de code de planification à un moment spécifique en définissant la valeur de temps mort et l'heure d'intervalle. Le premier exécute le code après l'heure spécifiée, tandis que le second est appelé une fois pour chaque heure spécifiée.
Délai d'appel SetTimeout ()
La méthode setTimeout () accepte deux paramètres, le premier paramètre est une fonction, et le deuxième paramètre est le temps (unités de microsecondes), qui renvoie l'ID numérique.
setTimeout (function () {alert ("Hello!");}, 1000);Après l'appel setTimeout (), la méthode renvoie un ID numérique, indiquant l'appel de temps mort et l'appel de temps mort peut être annulé.
var timeoud = setTimeout (function () {alert ("Hello!");}, 1000); ClearTimeout (timeoutid);Set Intermittent Call SetInterval ()
La méthode setInterval () accepte deux paramètres, le premier paramètre est une fonction, le deuxième paramètre est le temps (microsecondes unitaires) et renvoie l'ID numérique
setInterval (function () {alert ("Hello!");}, 1000);Annuler l'appel pour ne clearInterval () et accepter un paramètre ID d'appel intermittent
var interbalid = null; var span = document.CreateElement ("Span"); // Créer un nœud span span.id = "time"; // Définissez le document ID Span.Body.ApendChild (SPAN); // Ajouter une fonction Span incmenmentNumber () {var now = new Date (); var timestr = now.tolocaletimestring (); span.innertext = timestr; num ++; if (num == 10) {ClearInterval (intervalid); // Le temps reste inchangé après dix secondes}} interlid = setInterval (incrément, 1000);Essayez d'utiliser des appels de temps mort au lieu d'appels intermittents
var num = 0; var max = 10; fonction incmenmentNumber () {num ++; if (num <max) {setTimeOut (incrément, 1000); } else {alert ("ok"); }} setTimeout (incrément, 1000);7. boîte de dialogue système
Alerte d'alerte alerte ()
alert ("Bienvenue!");La zone d'information Confirm () a un bouton d'annulation
if (confirmer ("Êtes-vous d'accord?")) {alert ("d'accord"); } else {alert ("en désaccord"); }Inside (), incitant l'utilisateur à saisir un texte
var result = invite ("vous respectez votre nom de famille?", ""); if (result! == null) {alert ("bienvenue" + résultat); }L'explication détaillée ci-dessus de la BOM (objet Window) en JavaScript est tout le contenu partagé par l'éditeur. J'espère que cela pourra vous donner une référence et j'espère que vous pourrez soutenir Wulin.com plus.