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;

objet d'écran

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

objet location

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

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地址
}

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.

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

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

Moka

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 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.

É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

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

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!