Le rôle de l'objet Window dans le champ front-end

Fenêtre spéciale

Fenêtre de mention, sur le web page C'est très courant, comme ceci :

window.onload=function(){
//执行函数体
}

Ce code signifie quoi faire lorsque le contenu de la page Web est chargé.

Dans le domaine de js, l'objet window a un double rôle. Il est à la fois une interface permettant d'accéder à la fenêtre du navigateur et un objet Global. [Recommandations de cours associées : Tutoriel vidéo JavaScript]

Pour cette raison, toutes les variables et fonctions déclarées dans la portée globale deviendront des propriétés et des méthodes de l'objet window.

Par exemple :

var age = 29;
function sayAge(){
    alert(this.age);
}
alert(window.age); //29
sayAge();         //29
window.sayAge();  //29

Mais les deux ne sont pas complètement équivalents. Les variables globales ne peuvent pas être supprimées via delete, mais les propriétés définies directement sur la fenêtre le peuvent.

Héritage historique

Les premières pages Web utilisaient plus de fenêtres et de cadres, affichant des incrustations dans la même fenêtre Un ensemble de pages Web, ainsi que diverses fenêtres contextuelles telles que alerte, confirmation, invite, etc., permettent aux utilisateurs de saisir ou de confirmer des informations. Cependant, avec le développement de la technologie et de la conception du développement Web, elles sont devenues difficiles à trouver, nous ne le ferons donc pas. concentrez-vous sur eux ici.

objet de localisation

Attributs de base

l'emplacement est l'un des objets de nomenclature les plus utiles. Il fournit des informations et des fonctions de navigation pour le document chargé dans la fenêtre actuelle. Ses principales utilisations sont liées aux URL :

● Hash : renvoie les caractères après le symbole # dans l'URL, sinon, renvoie vide.

　Quantity　host/hostname : Renvoie le nom du serveur ou le numéro de port.

Quantityhref : Renvoie l'url complète

Quantityport : Renvoie le numéro de port spécifié

Quantityprotocol : Renvoie le protocole utilisé

Quantitysearch : Renvoie la chaîne de requête url, c'est-à-dire tout du début à la fin du point d'interrogation

Opération de localisation

location peut changer l'emplacement du navigateur de plusieurs manières , la plus couramment utilisée est la méthode assign(), par exemple :

location.assign("http://www.baidu.com");

Cela ouvrira immédiatement une nouvelle URL et ajoutera un enregistrement à l'historique de navigation. Les deux lignes de code suivantes sont équivalentes :

window.location = "http://www.baidu.com";
location.href = "http://www.baidu.com";

.

Le plus courant est l'emplacement .href.

Bien sûr, la modification d'autres attributs peut également modifier la page actuellement chargée. Après avoir modifié l'URL de quelque manière que ce soit, un nouvel enregistrement sera généré. L'utilisateur peut toutefois accéder à la page précédente en cliquant sur le bouton Retour. , il y a Lorsque nous ne voulons pas que cette opération se produise, nous pouvons utiliser la méthode replace(). Comme ce qui suit :

location.replace("http://www.baidu.com");

Il ne reçoit qu'un seul paramètre, l'url vers laquelle naviguer, et aucun enregistrement ne sera généré, et l'utilisateur ne peut pas revenir à la page précédente.

Une autre méthode liée à la position est reload(), qui signifie littéralement recharger la page actuelle. Cependant, il y a une petite mise en garde ici. S'il s'agit simplement d'un rechargement sans paramètres, la page sera rechargée à partir de Reload. cache du navigateur. Si vous forcez le rechargement depuis le serveur, vous devez transmettre des paramètres, comme ceci :

location.reload(true);

objet historique

historique Conserve les enregistrements. des utilisateurs surfant sur Internet. Chaque fenêtre et onglet du navigateur possède son propre objet d'historique associé à un objet de fenêtre spécifique. Pour des raisons de sécurité, les développeurs ne peuvent généralement pas savoir quelles pages Web l'utilisateur a consultées, mais il existe toujours des moyens d'implémenter le transfert et la navigation. les fonctions en arrière sont go(). Par exemple :

history.go(-1);
history.go(1);

Le paramètre n'est pas seulement un nombre, mais également une chaîne. Le navigateur passera à la première position de l'historique contenant la chaîne, soit en avant, soit en arrière. Par exemple,

history.go("baidu.com");

De plus, il existe des méthodes plus directes back() et forward() pour avancer ou reculer.

De plus, l'historique possède également un attribut de longueur, qui enregistre le nombre d'enregistrements historiques. Vous pouvez l'utiliser si vous souhaitez déterminer si l'utilisateur a ouvert votre page depuis le début.

if(history.length == 0){
    //干你想干的事
}

L'objet historique n'est pas particulièrement utilisé, mais dans certaines conceptions spéciales, il est quand même nécessaire de lui demander de résoudre des problèmes.

Résumé

Le statut de l'objet fenêtre dans la vague Internet mobile n'est plus aussi important que celui du côté PC, et il implique plus de fonctions et de détection. Dans un aspect, cela implique plus d'interactions, tandis que d'autres aspects sont implémentés par un code personnalisé avec des fonctions plus riches.

Malgré cela, l'objet window n'est pas si simple, il y a aussi un objet navigateur important, mais quand il s'agit de lui, il y a beaucoup de contenu, je vais donc le partager avec vous dans un document séparé article plus tard.

Cet article provient de la rubrique tutoriel js, bienvenue pour apprendre !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!