Explication détaillée de l'exemple de code d'objet de navigateur JavaScript

JavaScript peut obtenir de nombreux objets fournis par le navigateur et effectuer des opérations. Cet article vous présentera les connaissances pertinentes sur les objets du navigateur en JavaScript. Jetons un coup d'œil

JavaScript peut obtenir de nombreux objets fournis par le navigateur et les exploiter.

window

L'objet window agit non seulement comme une portée globale, mais représente également la fenêtre du navigateur.

L'objet window a les propriétés innerWidth et innerHeight, qui peuvent obtenir la largeur et la hauteur internes de la fenêtre du navigateur. La largeur et la hauteur internes font référence à la largeur et à la hauteur nettes utilisées pour afficher la page Web après avoir supprimé les éléments réservés tels que les barres de menus, les barres d'outils et les bordures.

Compatibilité : IE<=8 n'est pas pris en charge.

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

En conséquence, il existe également un attribut externalWidth et externalHeight, qui peut obtenir toute la largeur et la hauteur de la fenêtre du navigateur.

navigator

objet navigateur représente les informations du navigateur. Les attributs les plus couramment utilisés incluent :

• navigator.appName : nom du navigateur

• navigator.appVersion : version du navigateur ; 🎜>

  navigator.langue : La langue définie par le navigateur

• navigator.platform : Type de système d'exploitation

• navigator.userAgent : chaîne User-Agent définie par le navigateur.
Veuillez noter que les informations du navigateur peuvent être facilement modifiées par l'utilisateur, donc la valeur lue par JavaScript peut ne pas être nécessairement correcte. Afin d'écrire différents codes pour différents navigateurs, de nombreux débutants aiment utiliser if pour déterminer la version du navigateur, par exemple :

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

Cependant, cela peut non seulement rendre le jugement inexact, mais également le rendre. difficile de maintenir le code. La méthode correcte consiste à utiliser pleinement la fonctionnalité JavaScript permettant de renvoyer un élément indéfini pour les propriétés inexistantes et à utiliser directement l'opérateur de court-circuit || pour calculer :

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

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

écran

objet d'écran

représente les informations d'écran. Les attributs couramment utilisés sont :

screen.width. : largeur de l'écran, en pixels Unité

• screen.height : Hauteur de l'écran, en pixels

• screen.colorDepth : Renvoie la nombre de chiffres de couleur, tels que 8, 16, 24.

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

location

objet location

représente les informations URL de la page actuelle . Par exemple, une URL complète :

http://www.example.com:8080/path/index.html?a=1&b=2#TOP

peut être obtenue avec localisation. href. Pour obtenir la valeur de chaque partie de l'URL, vous pouvez écrire :

Pour charger une nouvelle page, vous pouvez appeler location.assign(). Si vous souhaitez recharger la page en cours, il est très pratique d'appeler la méthode location.reload().

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'

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

document

L'objet document représente la page actuelle. Étant donné que HTML est représenté sous forme d'arborescence sous forme de DOM dans le navigateur, l'objet document est le nœud racine de l'ensemble de l'arborescence DOM.

L'attribut title du document est lu à partir de dans le document HTML, mais il peut être modifié dynamiquement :

Veuillez respecter le titre du changement de fenêtre du navigateur.

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

Pour trouver un nœud dans l'arborescence DOM, vous devez commencer la recherche à partir de l'objet document. Les recherches les plus couramment utilisées sont basées sur l'ID et le nom de la balise.

Nous préparons d'abord les données HTML :

Utilisez getElementById() et

getElementsByTagName

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

() fournies par l'objet document pour obtenir un nœud DOM en Identifiez et obtenez un ensemble de nœuds DOM en fonction du nom du tag :

Moka

Café moka chaud

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);

Yaourt

Yaourt vieux de Pékin
Jus
Pomme fraîchement pressée juice


L'objet document possède également un attribut cookie, qui peut obtenir le cookie de la page actuelle.

Le cookie est un identifiant clé-valeur envoyé par le serveur. Parce que le protocole HTTP est sans état, mais si le serveur veut distinguer quel utilisateur a envoyé la demande, il peut utiliser Cookie pour le distinguer. Lorsqu'un utilisateur se connecte avec succès, le serveur envoie un cookie au navigateur, tel que user=ABC123XYZ (chaîne cryptée)... Après cela, lorsque le navigateur visite le site Web, il attachera ce cookie à l'en-tête de la demande, et le Le serveur utilisera le cookie en fonction du cookie permettant de distinguer les utilisateurs.

Les cookies peuvent également stocker certains paramètres du site Internet, tels que la langue affichée sur la page, etc.

JavaScript peut lire le cookie de la page actuelle via document.cookie :

Étant donné que JavaScript peut lire le cookie de la page et que les informations de connexion de l'utilisateur sont généralement également stockées dans le cookie, Cela crée un risque de sécurité énorme, car il est autorisé à introduire du code JavaScript tiers dans les pages HTML :

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

S'il y a du code malveillant dans le JavaScript tiers introduit, www. Le site Web .com obtiendra directement les informations de

connexion utilisateur

<!-- 当前页面在wwwexample.com -->
<html>
  <head>
    <script src="http://www.foo.com/jquery.js"></script>
  </head>
  ...
</html>

du site Web www.example.com.

Afin de résoudre ce problème, le serveur peut utiliser httpOnly lors de la configuration des cookies. Les cookies définis sur httpOnly ne seront pas lus par JavaScript. Ce comportement est implémenté par le navigateur. Tous les navigateurs grand public prennent en charge l'option httpOnly et IE la prend en charge à partir de IE6 SP1.

Pour garantir la sécurité, le serveur doit toujours insister pour utiliser httpOnly lors de la configuration des cookies.

historique

objet historique enregistre l'historique du navigateur JavaScript peut rappeler() de l'objet historique. ou forward (), ce qui équivaut à ce que l'utilisateur clique sur le bouton « précédent » ou « suivant » du navigateur.

Cet objet est un objet hérité historique. Pour les pages Web modernes, en raison de l'utilisation intensive d'AJAX et de l'interaction entre les pages, appeler simplement et grossièrement history.back() peut mettre les utilisateurs très en colère.

Lorsque les novices commencent à concevoir des pages Web, ils aiment appeler history.back() lorsque la page de connexion est connectée avec succès, en essayant de revenir à la page avant la connexion. C’est une mauvaise approche.

Vous ne devez en aucun cas utiliser l'objet historique.

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!