Résumé des compétences des méthodes de fenêtre contextuelle JavaScript_javascript

Les exemples de cet article résument les méthodes de fenêtres contextuelles JavaScript couramment utilisées pour votre comparaison et votre référence. J'espère que cela sera utile à tout le monde. La méthode détaillée est la suivante :

1. Actualisez la page Web sans invite :

Avez-vous remarqué que lors de l'actualisation de certaines pages Web, une fenêtre d'invite apparaîtra. Cliquez sur « OK » pour actualiser.
Certaines pages ne vous inviteront pas et seront actualisées directement sans afficher de fenêtre d'invite.
Si la page n'a pas de formulaire,
La fenêtre d'invite ne s'affichera pas
Si la page a un formulaire,
a)0a49d8328ba1b67146975e617cc81251 Une fenêtre d'invite apparaîtra
b)012a484319de2c757cb918250a0098ad Ne s'affichera pas

2. Comment actualiser la page en utilisant javascript :

window.location.reload();

Utilisez la fenêtre contextuelle affichée par window.open() pour actualiser la fenêtre parent

window.opener.location.reload()

Utilisez window.showDialog pour faire apparaître une fenêtre modale

window.dialogArguments.location.reload();

3.code de la fenêtre contextuelle javascript :

Méthode window.open() :
Environnement pris en charge par window.open() : JavaScript1.0 /JScript1.0 /Nav2 /IE3 /Opera3 Syntaxe de base :

window.open(pageURL,name,parameters) 

Parmi eux :

pageURL est le chemin de la sous-fenêtre

le nom est le handle de la fenêtre enfant
les paramètres sont des paramètres de fenêtre (chaque paramètre est séparé par des virgules)

Exemple :

<SCRIPT> 
<!-- 
window.open ('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no') 
//写成一行 
--> 
</SCRIPT>

Une fois le script exécuté, page.html sera ouvert dans une nouvelle fenêtre avec une largeur de 100, une hauteur de 400, 0 pixel du haut de l'écran, 0 pixel de la gauche de l'écran, pas de barre d'outils , pas de barre de menu et pas de barre de défilement, non redimensionnable, pas de barre d'adresse, pas de barre d'état.

Veuillez comparer.

L'exemple ci-dessus implique plusieurs paramètres couramment utilisés. De plus, il existe de nombreux autres paramètres, veuillez consulter 4.

Divers paramètres

Parmi eux, oui/non peut également utiliser 1/0 ; la valeur du pixel est une valeur spécifique, un pixel unitaire.

Paramètre | Plage de valeurs | Description

| toujoursLowered | oui/non | La fenêtre spécifiée est cachée derrière toutes les fenêtres

AlwaysRaised | oui/non | La fenêtre spécifiée est suspendue au-dessus de toutes les fenêtres
dépendait | oui/non | S'il faut fermer en même temps que la fenêtre parent
répertoires | oui/non | Si la barre de répertoire de Nav2 et 3 est visible
hauteur | valeur en pixels | hauteur de la fenêtre
raccourcis clavier | oui/non | Définir un raccourci clavier de sortie sécurisée dans une fenêtre sans barre de menu
innerHeight | valeur en pixels | Hauteur en pixels du document dans la fenêtre
innerWidth | valeur en pixels | Largeur en pixels du document dans la fenêtre
emplacement | oui/non | si la barre d'emplacement est visible
barre de menus | oui/non | Si la barre de menus est visible
externalHeight | valeur en pixels | Définir la hauteur en pixels de la fenêtre (y compris les bordures décoratives)
externalWidth | valeur en pixels | Définir la largeur en pixels de la fenêtre (y compris les bordures décoratives)
redimensionnable | oui/non | Si la taille de la fenêtre est redimensionnable
screenX | valeur en pixels | La longueur de la fenêtre en pixels à partir du bord gauche de l'écran
screenY | valeur du pixel | La longueur de la fenêtre en pixels à partir de la bordure supérieure de l'écran
barres de défilement | oui/non | Indique si la fenêtre peut avoir des barres de défilement
barre de titre | oui/non | Si la barre de titre de la fenêtre est visible
barre d'outils | oui/non | Si la barre d'outils de la fenêtre est visible
Largeur | Valeur en pixels | Largeur en pixels de la fenêtre
z-look | oui/non | Indique si la fenêtre flotte au-dessus des autres fenêtres après son activation

function ShowDialog(url) {
  var iWidth=300; //窗口宽度
  var iHeight=200;//窗口高度
  var iTop=(window.screen.height-iHeight)/2;
  var iLeft=(window.screen.width-iWidth)/2;
  window.open(url,"Detail","Scrollbars=no,Toolbar=no,Location=no,Direction=no,Resizeable=no,
Width="+iWidth+" ,Height="+iHeight+",top="+iTop+",left="+iLeft);
 }

Méthode window.showModalDialog :

Introduction de base :

showModalDialog() (IE 4 pris en charge)

showModelessDialog() (IE 5 pris en charge)

La méthode window.showModalDialog() est utilisée pour créer une boîte de dialogue modale qui affiche le contenu HTML.

La méthode window.showModelessDialog() est utilisée pour créer une boîte de dialogue non modale qui affiche le contenu HTML.

Comment utiliser :

参数说明：

sURL--
必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
vArguments--
可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures--
可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
1.dialogHeight :对话框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。
2.dialogWidth: 对话框宽度。
3.dialogLeft: 离屏幕左的距离。
4.dialogTop: 离屏幕上的距离。
5.center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。
6.help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。
7.resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改变大小。默认no。
8.status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
9.scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。

下面几个属性是用在HTA中的，在一般的网页中一般不使用。

10.dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印预览时对话框是否隐藏。默认为no。
11.edge:{ sunken | raised }：指明对话框的边框样式。默认为raised。
12.unadorned:{ yes | no | 1 | 0 | on | off }：默认为no。

参数传递：

（1）.要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符。也可以传递对象，例如：
-------------------------------
parent.htm页面：

<script>
var obj = new Object();
obj.name="jb51";
window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");
</script>

modal.htm页面：

<script>
var obj = window.dialogArguments
alert("您传递的参数为：" + obj.name)
</script>

(2)可以通过window.returnValue向打开对话框的窗口返回信息，当然也可以是对象。例如：

parent.htm页面代码：

<script>
str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");
alert(str);
</script>
modal.htm
<script>
window.returnValue="http://www.jb51.com";
</script>

例子：

function ShowDialog(url) {
  var iWidth=300; //窗口宽度
  var iHeight=200;//窗口高度
  var iTop=(window.screen.height-iHeight)/2;
  var iLeft=(window.screen.width-iWidth)/2;
  window.showModalDialog(url,window,"dialogHeight: "+iHeight+"px; dialogWidth: "+iWidth+"px;
dialogTop: "+iTop+"; dialogLeft: "+iLeft+"; resizable: no; status: no;scroll:no");
 }

注意这里的第二个参数，window

4.模式窗口数据不刷新（缓存）问题

在jsp页面加入如下语句

<%
   response.setHeader("Pragma","No-Cache");
   response.setHeader("Cache-Control","No-Cache");
   response.setDateHeader("Expires", 0);
%>

5.模式窗口中，链接弹出新窗口问题：

◎_blank，在新浏览器窗口中打开链接文件。

◎_parent，将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象_self参数一样。

◎_self，在同一框架或窗口中打开所链接的文档。此参数为默认值，通常不用指定。

◎_top，在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架。

在9c3bca370b5104690d9ef395f2c5f8d1和6c04bd5ca3fcae76e30b72ad730ca86d间加入50e4aea961872c99fc549888c41dc48a

6.无提示关闭页面的方法：

function CloseWin(){
  var ua = navigator.userAgent; var ie = navigator.appName=="Microsoft Internet Explorer"?true:false;
  if(ie){
 var IEversion = parseFloat(ua.substring(ua.indexOf("MSIE ")+5,ua.indexOf(";",ua.indexOf("MSIE "))));
  if( IEversion< 5.5){
  var str = '';
  document.body.insertAdjacentHTML("beforeEnd", str);
   document.all.noTipClose.Click();
  } else {
   window.opener =null; window.close();
  }
 }else{
 window.close()
 }
}

感兴趣的读者可以调试一下上述方法，相信会给大家带来一定的启发与帮助。