Emplacement de la fenêtre
【1】 Get
Le navigateur (Firefox ne prend pas en charge) fournit des propriétés screenLeft et screenTop , qui sont utilisées pour représenter respectivement la position de la fenêtre par rapport au côté gauche et supérieur de l'écran.
Lorsque la fenêtre est maximisée, les valeurs renvoyées par chaque navigateur ne sont pas les mêmes lors de l'exécution du code suivant. Chrome revient à gauche: 0; en haut: 0. IE revient à gauche: 0; en haut: 56 (s'il y a une barre de menu, il revient à gauche: 0; en haut: 78), car c'est-à-dire la distance du côté gauche et supérieur de l'écran à la zone visible de la page représentée par l'objet de fenêtre. Safari revient à gauche: -8; en haut: -8 en raison de son propre bug
// déplace la fenêtre, il y aura un changement dans la valeur <div id = 'myDiv'> </div> <script> var timer = setInterval (function () {mydiv.innerhtml = 'Left:' + window.screenleft + '; top:' + windowRésultat: gauche: 0; haut: 93
screenX et screenY (IE8-) fournissent également les mêmes informations de position de fenêtre.
[Remarque] screenLeft , screenTop , screenX et screenY sont toutes des propriétés en lecture seule. La modification de leurs valeurs ne fera pas bouger la fenêtre.
Lorsque la fenêtre est maximisée, les valeurs renvoyées par chaque navigateur sont toujours différentes. Firefox revient à gauche: -7; en haut: -7. Chrome revient toujours à gauche: 0; en haut: 0. IE9 + revient toujours à gauche: -7; en haut: -7, que la barre de menu soit affichée ou non. Safari revient toujours à gauche: -8; en haut: -8 en raison de son propre bug
<div id = 'myDiv'> </div> <cript> var timer = setInterval (function () {mydiv.innerhtml = 'Left:' + window.screenx + '; top:' + window.screeny;}) mydiv.onclick = function () {ClearInterval (timer);} </cript>Résultat: gauche: 0; haut: 93
compatible
La méthode d'écriture compatible pour obtenir l'emplacement des fenêtres est la suivante
[Remarque] En raison des différentes implémentations de chaque navigateur, il est impossible d'obtenir la valeur de coordonnée exacte dans des conditions de croisement.
var LeftPos = (typeof window.screenLeft == "Number")? window.screenleft: window.screenx; var toppos = (typeof window.screentop == "nombre")? window.screentop: window.screeny; Console.log (LeftPos, Toppos);
【2】 mobile
Utilisez des méthodes moveTo() et moveBy() pour déplacer la fenêtre vers un nouvel emplacement. Ces deux méthodes ne sont prises en charge que par le navigateur IE.
moveTo() reçoit deux paramètres, à savoir les valeurs de coordonnées X et Y de la nouvelle position
<div id = "MyDiv"> Cliquez ici </div> <cript> // Déplacez la fenêtre vers (0,0) mydiv.onclick = function () {window.moveto (0,100); } </ script> moveBy() reçoit deux paramètres, à savoir le nombre de pixels se déplaçant dans des directions horizontales et verticales.
<div id = "MyDiv"> Cliquez ici </div> <cript> // Déplacez la fenêtre vers le bas de 100 pixels mydiv.onclick = function () {window.moveby (0,100); } </ script>Taille de la fenêtre
【1】 Get
outerWidth et outerHeight sont utilisées pour représenter la taille de la fenêtre du navigateur lui-même.
[Remarque] Ie8-Browser ne prend pas en charge
// Chrome revient à la largeur d'oubli window.outerheight: '+ window.outerheight
RÉSULTAT: Extérieur: 1440; OUTERHEight: 743
innerWidth et innerHeight sont utilisées pour représenter la taille de la page, qui est en fait égale à la taille de la fenêtre du navigateur moins la largeur des propres frontières et barres de menu du navigateur, barres d'adresse, barres d'état, etc.
[Remarque] Puisque <frame> lui-même a également des propriétés de fenêtre, s'il y a un cadre dans la page, alors innerWidth et innerHeight dans le cadre se réfèrent innerWidth et innerHeight du cadre lui-même.
// Chrome revient Innerwidth: 1920; Innerheight: 971 // IE9 + Retour Innerwidth: 1536; Innerheight: 768 // Firefox revient innerwidth: 1536; Innerheight: 755 // safari. 'innerwidth:' + window.innerwidth + '; innerheight:' + window.innerheight: '+ window.innerheight
Résultat: Innerwidth: 701; Innerheight: 40
document.documentElement.clientWidth et document.documentElement.clientHeight dans DOM peut également représenter la taille de la page, renvoyant la même valeur innerWidth et innerHeight
[Remarque] De même, si le cadre est accessible, ces deux propriétés indiquent également les propriétés du cadre.
// Chrome retourne innerwidth: 1920; Innerheight: 971 // IE9 + Renvoie Innerwidth: 1536; Interheight: 768 // Firefox Renvoie Innerwidth: 1536; Interheight: 755 // Safari Renvoie Innerwidth: 1536; innerheight: 764 document.body.innerhtml = 'clientwidth:' + document.documentElement.clientWidth + '; ClientHeight:' + document.DocumentElement.ClientHeight
Résultat: ClientWidth: 701; ClientHeight: 40
Bien que ces deux types d'attributs représentent la même valeur sur l'ordinateur, ils ont des utilisations différentes du côté mobile. innerWidth et innerHeight représentent la fenêtre visuelle, c'est-à-dire le domaine du site Web que l'utilisateur voit; document.documentElement.clientWidth et clientHeight représentent la fenêtre de mise en page, se référant à la taille de la disposition CSS.
【2】 Réglage
Utilisez les deux méthodes de resizeTo() et resizeBy() pour redimensionner la fenêtre du navigateur
[Remarque] Seulement le support des navigateurs IE et Safari
resizeTo() reçoit deux paramètres: la nouvelle largeur et la nouvelle hauteur de la fenêtre du navigateur
<div id = "MyDiv"> Cliquez ici </div> <cript> mydiv.onclick = function () {// redimensionner la fenêtre du navigateur à 200200 Window.Resizeto (200,200);} </cript> resizeBy() reçoit deux paramètres: la différence entre la largeur et la hauteur de la nouvelle fenêtre du navigateur et la fenêtre d'origine
<div id = "MyDiv"> Cliquez ici </div> <cript> mydiv.onclick = function () {// Réduisez la largeur de la fenêtre du navigateur par 100 window.resizeby (-100,0);} </ script>Ouvrir la fenêtre
window.open() peut naviguer vers une URL spécifique ou ouvrir une nouvelle fenêtre de navigateur. Cette méthode reçoit 4 paramètres: l'URL à charger, la cible de la fenêtre, une chaîne de fonctionnalités et un booléen indiquant si la nouvelle page remplace la page actuellement chargée dans l'historique du navigateur.
paramètre
【1】 Souvent, seul le premier paramètre doit être passé, et l'ouverture par défaut dans une nouvelle fenêtre
<div id = "MyDiv"> Cliquez ici </div> <cript> mydiv.onclick = function () {window.open ("http://baidu.com");} </cript>【2】 Le deuxième paramètre indique le nom de la fenêtre ou du cadre existant, ou la méthode d'ouverture de _self, _parent, _top, _blank, etc.
<div id = "MyDiv"> Cliquez ici </div> <cript> // Ouvrir MyDiv.OnClick = Function () {Window.Open ("http://baidu.com", '_ self');} </ script>【3】 Le troisième paramètre est une chaîne de réglage séparée des virgules, indiquant quelles fonctionnalités sont affichées dans la nouvelle fenêtre
<div id = "MyDiv"> Cliquez ici </div> <cript> mydiv.onclick = function () {// Ouvrez la page Web QQ avec une hauteur de 500, largeur de 500, coordonnée verticale de 0, coordonnée horizontale de 200 dans un nouveau window.open ("http://qq.com", "_blank", "height = 500, width = 500, top = 0, gauche = 200")} </ script>[4] Le quatrième paramètre n'est utile que si le deuxième paramètre a nommé une fenêtre qui existe. Il s'agit d'une valeur booléenne qui déclare si l'URL spécifiée par le premier paramètre est de remplacer l'entrée actuelle dans l'historique de navigation de la fenêtre (true) ou si une nouvelle entrée est créée dans l'historique de navigation de la fenêtre (FALSE) qui est le paramètre par défaut
Valeur de retour
La valeur de retour de la méthode open() est l'objet de fenêtre de la nouvelle fenêtre
<div id = "MyDiv"> Cliquez ici </div> <cript> mydiv.onclick = function () {var w = window.open (); w.document.body.innerhtml = 'Test Text';} </cript>L'objet de fenêtre nouvellement créé a une propriété d'ouverture, qui contient l'objet de fenêtre d'origine qui l'a ouvert
<div id = "MyDiv"> Cliquez ici </div> <cript> mydiv.onclick = function () {var w = window.open (); console.log (w.opener === fenêtre); // true} </ script>filtre
La plupart des navigateurs ont des systèmes de filtrage pop-up. Généralement, la méthode open() est appelée uniquement lorsque l'utilisateur clique manuellement sur un bouton ou un lien. Le code JavaScript échoue généralement lorsque vous essayez d'ouvrir une fenêtre contextuelle lorsque le navigateur est initialement chargé. En cas d'interception, la valeur de retour undefined
<div id = "MyDiv"> Cliquez ici </div> <cript> var w = window.open (); console.log (w); // undefined </cript>
Ferme Ferme
Tout comme la méthode open() ouvre une nouvelle fenêtre, la méthode close() ferme une fenêtre. Si l'objet de fenêtre w a été créé, vous pouvez utiliser le code suivant pour le désactiver
<div> <span id = "span1"> ouvrir la fenêtre </span> <span id = "span2"> Fermer Window </span> </div> <script> var w; span1.onclick = function () {w = window.open ();} span2.onclick = function () {if (w) {w.close (); }} </ script> L'objet W dans la nouvelle fenêtre a également une propriété closed pour détecter si elle est fermée.
<div id = "MyDiv"> Cliquez ici </div> <cript> // Afficher False d'abord, alors truemydiv.onclick = function () {var w = window.open (); console.log (w.closed); // false setTimeout (function () {w.close (); console.log (w.closed); // true}, 1000); } </ script>Petite application
Objet renvoyé par window.open() peut faire fonctionner l'ouverture et la fermeture d'une fenêtre nouvellement ouverte
<div id = "MyDiv"> Open Window </div> <cript> var w = null; myDiv.OnClick = function () {// Si w n'existe pas, c'est-à-dire qu'aucune nouvelle fenêtre n'est ouverte, ou la nouvelle fenêtre est fermée si (! W) {w = window.open ("http://baidu.com", "_blank", "height = 400, width = 400, top = 10, gauche = 10"); myDiv.innerHtml = 'Fermer Window'; // Si w existe, cela signifie que la nouvelle fenêtre est ouverte} else {w.close (); w = null; myDiv.innerHtml = 'Open Window'; }} </ script>Résumer
Cet article présente principalement les opérations de base des fenêtres du navigateur JavaScript. Il est très simple à comprendre mais très pratique. J'espère que cela sera utile à l'utilisation quotidienne de tous les JavaScript.