recherche

Maison >développement back-end >tutoriel php >Récapitulatif technique du partage des fenêtres pop-up javascript

Récapitulatif technique du partage des fenêtres pop-up javascript

小云云
小云云original
2018-03-15 14:12:151283parcourir

Cet article partage principalement avec vous le résumé technique des fenêtres pop-up javascript. Voici quelques paramètres des fenêtres pop-up. Vous pouvez les définir vous-même. Les paramètres sont facultatifs et séparés par des virgules. String --Répertoriez la table d'objets séparée par des virgules. Chaque élément a sa propre valeur, et ils seront séparés (ex : "plein écran=oui, barre d'outils=oui"). Vous trouverez ci-dessous les différentes fonctionnalités prises en charge.

channelmode = { yes | no | 1 | 0 } 是否在窗口中显示阶梯模式 默认为no
directories = { yes | no | 1 | 0 } 是否在窗口中显示各种按钮 默认为yes
fullscreen = { yes | no | 1 | 0 } 是否用全屏方式显示浏览器 默认为no
height = number 指定窗口的高度，单位是像素 最小值是100
left = number 指定窗口距左边框的距离，单位是像素 值必须大于或者等于0
location = { yes | no | 1 | 0 } 指定是否在窗口中显示地址栏 默认为yes
menubar = { yes | no | 1 | 0 } 指定是否在窗口中显示菜单栏 默认为yes
resizable = { yes | no | 1 | 0 } 指定是否在窗口中显示可供用户调整大小的句柄 默认为yes
scrollbars = { yes | no | 1 | 0 } 指定是否在窗口中显示横向或者纵向滚动条 默认为yes
status = { yes | no | 1 | 0 } 指定是否在窗口中显示状态栏 默认为yes
titlebar = { yes | no | 1 | 0 } 指定是否在窗口中显示标题栏。在非调用HTML Application或者一个对话框的情况下，这一项将被忽略 默认为yes
toolbar = { yes | no | 1 | 0 } 指定是否在窗口中显示工具栏，包括如前进、后退、停止等按钮 默认为yes
width = number 指定窗口的宽度，单位是像素 最小值是100
top = number 指定窗口顶部的位置，单位是像素 值必须大于或者等于0

1. Le code de la fenêtre contextuelle le plus basique　

　2ec7761c62b319a0d8f749487b7dc096 
　　b7611806ba5d3b1e1004f4f3c5b20d24 
　　db271416853c42fd247a57c1a2c29eb6

　
Parce qu'il s'agit d'un morceau de code javascripts, ils doivent être placés entre

.

fonctionne sur certains anciens navigateurs. Dans ces anciens navigateurs, le code dans la balise ne sera pas affiché sous forme de texte. Développez cette bonne habitude. window.open ("page.html") est utilisé pour contrôler le pop-up d'une nouvelle fenêtre page.html Si page.html n'est pas dans le même chemin que la fenêtre principale, le chemin doit être indiqué devant, absolu. chemin (http://) et relatif. Tout chemin (../) est acceptable. Vous pouvez utiliser des guillemets simples ou des guillemets doubles, mais ne les mélangez pas. Ce morceau de code peut être ajouté à n'importe quelle position dans le HTML, entre et et ou entre. Plus le code est précoce, plus il sera exécuté tôt. Surtout si le code de la page est long et que vous souhaitez que la page s'affiche plus tôt. essayez de le mettre le plus en avant possible.
　
2. La fenêtre pop-up après réglage
　
Parlons des paramètres de la fenêtre pop-up. Ajoutez simplement un peu plus au code ci-dessus. Personnalisons l'apparence, la taille et la position contextuelle de cette fenêtre contextuelle en fonction des conditions spécifiques de la page. 

　2ec7761c62b319a0d8f749487b7dc096 
　　bc246c57ad82c9647b736d9a190aab97 
　　db271416853c42fd247a57c1a2c29eb6

　
　Explication des paramètres : 　
　0df24357f4a395f29351d2fd9f7c0aaa window;
'page.html' Le nom du fichier de la fenêtre pop-up ;
'newwindow' Le nom de la fenêtre pop-up (pas le nom du fichier), facultatif, peut être remplacé par un '' vide ». ;
height=100 window height;
width=400 window width;
top=0 valeur en pixels de la fenêtre à partir du haut de l'écran
left=0 valeur en pixels de la fenêtre ; côté gauche de l'écran ;
barre d'outils = non s'il faut afficher la barre d'outils, oui Pour l'affichage
barre de menus, les barres de défilement représentent les barres de menus et les barres de défilement.
redimensionnable=non s'il faut autoriser la modification de la taille de la fenêtre, oui est autorisé ;
location=non s'il faut afficher la barre d'adresse, oui est autorisé
status=non s'il faut afficher les informations dans la barre d'état ; (généralement le fichier a été ouvert), oui est autorisé ;
　db271416853c42fd247a57c1a2c29eb6 Fin du script js

3. Utiliser les fonctions pour contrôler les fenêtres pop-up 　. Ce qui suit est un code complet.

　

<html> 
　　<head> 
　　<script LANGUAGE="JavaScript"> 
　　<!-- 
　　function openwin() { 
　　window.open ("page.html", "newwindow", "height=100, 
width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, 
status=no") 
//写成一行
　　} 
　　//--> 
　　</script> 
　　</head> 
　　<body onload="openwin()"> 
　　任意的页面内容... 
　　</body> 
　　</html>
　Une fonction openwin() est définie ici, et le contenu de la fonction est d'ouvrir une fenêtre. Cela ne sert à rien tant qu’on ne l’appelle pas. Comment l'appeler ?

　
Méthode 1 : cc110a74de578da962e6104bca52df40 Une fenêtre apparaît lorsque le navigateur lit la page 　
Méthode 2 : 61f7b9a4cb565e6aabb5aa542f3d13ea Fenêtre pop-up lorsque le navigateur quitte la page ; 　
Méthode 3 : Appel avec une connexion : 　fa9c7d54909cea769c2e39dda465d5e9
Remarque : Le "#" utilisé est une connexion virtuelle.
　
Méthode 4 : Appeler avec un bouton : 　f77eea19d539d6af60ecd09e6dc5fd4c
　

4. Deux fenêtres apparaissent en même temps
Apportez de légères modifications au code source :

Pour couvrir, utilisez haut et gauche pour contrôler la position du pop-up afin qu'ils ne se couvrent pas. Enfin, vous pouvez l'appeler en utilisant les quatre méthodes mentionnées ci-dessus. 

<script LANGUAGE="JavaScript"> 
　　<!-- 
　　function openwin() { 
　　window.open ("page.html", "newwindow", "height=100, 
width=100, top=0, left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, 
location=n o, status=no")　
//写成一行
 
　　window.open ("page2.html", "newwindow2", "height=100, 
width=100, top=1 00, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, 
loca tion=no, status=no")　
//写成一行
 
　　} 
　　//--> 
　　</script>
Remarque

 : Les noms des deux fenêtres (newwindows et newwindow2) ne doivent pas être les mêmes, ou ils doivent tous être vides.

5. Ouvrez le fichier 1.htm dans la fenêtre principale, et la petite fenêtre page.html apparaîtra en même temps. Le code suivant est ajouté à la zone de la fenêtre principale :

　
Ajoutez la zone 6c04bd5ca3fcae76e30b72ad730ca86d : b6adf01c7a299e57ceec4c70d6e93f0dopen5db79b134e9f6b82c0b36e0489ee08ed.

6. Contrôle de fermeture des fenêtres pop-up 

<script language="javascript"> 
　　<!-- 
　　function openwin() { 
　　window.open("page.html","","width=200,height=200") 
　　} 
　　//--> 
　　</script>
　

Contrôleons maintenant les fenêtres pop-up, et l'effet sera meilleur. Ne serait-il pas plus cool d'ajouter un petit morceau de code à la page pop-up (notez qu'il est ajouté au HTML de page.html, pas à la page principale) afin qu'elle se ferme automatiquement après 10 secondes ?
Tout d'abord, ajoutez le code suivant dans la zone du fichier page.html :

　

<script language="JavaScript"> 
　　function closeit() 
　　{ 
　　setTimeout("self.close()",10000) 　
//毫秒
 
　　} 
　　</script>

　　然后，再用0b774bfd64a2e0c25f227b95b95c6f4b 这一句话代替page.html中原有的a64997a0904a094b4570728d7f327acd这一句就可以了。(这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码，10秒钟后就自行关闭该窗口。)
7、在弹出窗口中加上一个关闭按钮

　　

<FORM> 
　　<INPUT TYPE=&#39;BUTTON&#39; VALUE=&#39;关闭&#39; onClick=&#39;window.close()&#39;> 
　　</FORM>


　　呵呵，现在更加完美了！
8、内包含的弹出窗口-一个页面两个窗口　　上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。通过下面的例子，你可以在一个页面内完成上面的效果。

　<html> 
　　<head> 
　　<SCRIPT LANGUAGE="JavaScript"> 
　　function openwin() 
　　{ 
　　OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no 
,scrollbars="+scroll+",menubar=no"); 
　　//写成一行 
　　OpenWindow.document.write("<TITLE>例子</TITLE>") 
　　OpenWindow.document.write("<BODY BGCOLOR=#ffffff>") 
　　OpenWindow.document.write("<h1>Hello!</h1>") 
　　OpenWindow.document.write("New window opened!") 
　　OpenWindow.document.write("</BODY>") 
　　OpenWindow.document.write("</HTML>") 
　　OpenWindow.document.close() 
　　} 
　　</SCRIPT> 
　　</head> 
　　<body> 
　　<a href="#" onclick="openwin()">打开一个窗口</a> 
　　<input type="button" onclick="openwin()" value="打开窗口"> 
　　</body> 
　　</html>

　　看看OpenWindow.document.write()里面的代码不就是标准的HTML吗？只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用 OpenWindow.document.close()结束啊。
9、终极应用--弹出的窗口之Cookie控制
　　回想一下，上面的弹出窗口虽然酷，但是有一点小毛病，比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页)，那么每次刷新这个页面，窗口都会弹出一次，我们使用cookie来控制一下就可以了。
　　首先，将如下代码加入主页面HTML的ef1cac8df639bc9110cb13b8b5ab3dd7区：

　　

<script> 
　　function openwin(){ 
　　window.open("page.html","","width=200,height=200") 
　　} 
　　function get_cookie(Name) { 
　　var search = Name + "=" 
　　var returnvalue = ""; 
　　if (document.cookie.length > 0) { 
　　offset = document.cookie.indexOf(search) 
　　if (offset != -1) { 
　　offset += search.length 
　　end = document.cookie.indexOf(";", offset); 
　　if (end == -1) 
　　end = document.cookie.length; 
　　returnvalue=unescape(document.cookie.substring(offset, end)) 
　　} 
　　} 
　　return returnvalue; 
　　} 　
　　function loadpopup(){ 
　　if (get_cookie(&#39;popped&#39;)==&#39;&#39;){ 
　　openwin() 
　　document.cookie="popped=yes" 
　　} 
　　} 
　　</script>

然后，用bd9cbe48f9f8591cb0122fce262b0eaa（注意不是openwin而是loadpop啊！）替换主页面中原有的a64997a0904a094b4570728d7f327acd这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。 

相关推荐：

jQuery实现简单的弹出窗口实例

JS弹出窗口的运用与技巧大全

jQuery实现的模拟弹出窗口功能示例

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Le framework RPC en PHP implémente un système de contrôle de flux basé sur RedisArticle suivant：Le framework RPC en PHP implémente un système de contrôle de flux basé sur Redis

Articles Liés

Voir plus