Explication détaillée de window.open() et discussion sur les problèmes de compatibilité du navigateur_compétences javascript

1. Syntaxe de base :
window.open(pageURL,name,parameters)
Où :
pageURL est le chemin de la sous-fenêtre
name est le nom de la sous-fenêtre
paramètres sont les paramètres de la fenêtre (chaque paramètre est séparé par des virgules)

2. Exemple

Copier le code Le code est comme suit :

page.html sera sous la nouvelle forme newwindow Ouvert au centre, la largeur est de 800, la hauteur est de 500, 0 pixel du haut de l'écran, 0 pixel de la gauche de l'écran,

Non barre d'outils, pas de barre de menu, pas de barre de défilement, pas de redimensionnement, pas de barre d'adresse, pas de barre d'état.

Chaque navigateur prend en charge différemment les fonctionnalités de fenêtre, paramètre sFeatures de window.open()

Résumé des résultats d'exécution de chaque navigateur :


Up Le tableau montre le niveau de support de chaque navigateur pour chaque option de paramètre de fonctionnalités. Ceux qui nécessitent une explication particulière sont les suivants :

[Note 1] : Dans IE7 IE8 Firefox Chrome Safari, lorsque l'option "barre de menus" est sélectionnée. est "oui" , la barre de menu n'est pas affichée par défaut, et la barre de menu ne peut être affichée qu'après avoir appuyé sur la touche ALT, au contraire, lorsque l'option "barre de menu" est "non", la barre de menu ne sera pas affichée ; même si la touche ALT est enfoncée.
【Remarque 2】 : Dans Safari, l'effet d'affichage lors de l'activation de l'option "emplacement" est le même que lors de l'activation de l'option "barre d'outils".
【Remarque 3】 : Dans IE6 IE8 Chrome, utilisez le positionnement "haut" et "gauche". Si la valeur des coordonnées définie est trop grande, la fenêtre contextuelle peut s'afficher en dehors de la plage visible de l'écran.
【Remarque 4】 : Dans IE7 Firefox Safari Opera, utilisez le positionnement "haut" et "gauche". Si la valeur de coordonnée définie est trop grande, la fenêtre ajustera automatiquement les valeurs "haut" et "gauche". assurez-vous que la fenêtre Normalement affichée dans la zone visible de l'écran.
【Annotation 5】 : Dans Chrome Opera, il n'est pas pris en charge d'utiliser "gauche" et "haut" indépendamment sans définir les valeurs "largeur" ​​et "hauteur". Pour le moment, "gauche" et "haut". Les valeurs de réglage sont Aucune d'entre elles ne prend effet.
【Annotation 6】 : Dans Chrome, il n'est pas pris en charge d'utiliser "largeur" ​​et "hauteur" indépendamment sans définir les valeurs "gauche" et "hauteur". les valeurs sont toutes les deux. Ne prend pas effet. Combiné avec la description de [Annotation 5], on voit que si vous souhaitez définir une ou plusieurs valeurs dans la largeur, la hauteur ou la position d'une fenêtre pop-up dans Chrome, vous devez toutes les attribuer, sinon cela ne fonctionnera pas.
【Annotation 7】 : Dans Firefox Chrome, la barre d'adresse sera toujours affichée.
【Annotation 8】 : Dans Opera, la barre d'adresse n'est pas affichée par défaut, mais vous pouvez cliquer sur la barre en haut de la page pour l'afficher. Après avoir défini "location=yes", la barre d'adresse s'affichera. automatiquement.
【Remarque 9】 : Dans Chrome Opera, quelle que soit la façon dont la valeur de la "barre de menus" est définie, la barre de menu ne sera jamais affichée.
【Annotation 10】 : Quelle que soit la façon dont la valeur « redimensionnable » est définie dans Firefox Safari Chrome Opera, la fenêtre peut toujours être redimensionnée par l'utilisateur.
【Annotation 11】 : Dans Safari Chrome, lorsqu'il y a des barres de défilement sur la page, quelle que soit la façon dont la valeur des "barres de défilement" est définie, les barres de défilement sont toujours visibles.
【Remarque 12】 : IE7 peut prendre en charge le paramètre « statut » pour masquer la barre d'état par défaut dans le système Windows XP SP3 ; cependant, dans l'environnement par défaut du système Windows Vista, le paramètre « statut » n'est pas pris en charge et le La barre d'état est toujours visible. Ceci est cohérent avec les deux. Les numéros de version mineure d'IE7 par défaut dans le système sont différents. Le premier a un numéro de version inférieur, tandis que le second a un numéro de version plus élevé.
【Annotation 13】 : Dans Firefox, quelle que soit la façon dont la valeur "statut" est définie, la barre d'état est toujours visible, tandis que dans Chrome Opera, contrairement à la première, la barre d'état est toujours invisible.
【Annotation 14】 : Dans Chrome Opera, quelle que soit la façon dont la valeur de la "barre d'outils" est définie, la barre d'outils n'est jamais affichée.
Pour résumer, on peut voir qu'il existe une énorme différence dans le niveau de support du paramètre sFeatures de la méthode window.open, et vous devez être prudent lorsque vous l'utilisez.

Généralement, lorsque nous utilisons window.open pour ouvrir une page, elle doit être affichée au centre :

Copier le code Le code est le suivant : var width=800; //La largeur de la fenêtre pop-up

var height=500; de la fenêtre pop-up ;

var top = (window.screen.availHeight- height)/2; //Position verticale de la fenêtre
var left = (window.screen.availWidth-width)/2; ; //Position horizontale de la fenêtre;
window.open('page.html', 'newwindow','height=' height ',width=' width ',top=' top ',left=' left ' ,
toolbar=no,menubar=no,scrollbars=no, resizing=no,location= no, status=no')


La différence entreavaheight et height

Copier le code Le code est le suivant : window.screen.width renvoie la largeur actuelle de l'écran (valeur de résolution)

window.screen.height renvoie la hauteur actuelle de l'écran (valeur de résolution)

screen.availWidth,screen.availHeight Fait référence à la longueur et à la largeur à l'exclusion de la barre des tâches (barre des tâches)