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

Mar 15, 2018 pm 02:12 PM
javascript js

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 

 <SCRIPT LANGUAGE="javascript"> 
  <!-- 
  window.open (&#39;page.html&#39;) 
  --> 
  </SCRIPT>
Copier après la connexion

 
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.

 <SCRIPT LANGUAGE="javascript"> 
  <!-- 
  window.open (&#39;page.html&#39;, &#39;newwindow&#39;, &#39;height=100, width=400, top=0, left=0, 
toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no&#39;) 
//这句要写成一行
  --> 
  </SCRIPT>
Copier après la connexion

 
 Explication des paramètres :  
  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>
Copier après la connexion
 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 : Une fenêtre apparaît lorsque le navigateur lit la page  
Méthode 2 : Fenêtre pop-up lorsque le navigateur quitte la page ;  
Méthode 3 : Appel avec une connexion :  
Remarque : Le "#" utilisé est une connexion virtuelle.
 
Méthode 4 : Appeler avec un bouton :  
 

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>
Copier après la connexion
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  :
open.

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

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

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>
Copier après la connexion

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

  

<FORM> 
  <INPUT TYPE=&#39;BUTTON&#39; VALUE=&#39;关闭&#39; onClick=&#39;window.close()&#39;> 
  </FORM>
Copier après la connexion


  呵呵,现在更加完美了!
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>
Copier après la connexion

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

  

<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>
Copier après la connexion

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

相关推荐:

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 de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Vous avez un jeu croisé?
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript Dec 17, 2023 pm 02:54 PM

Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de reconnaissance vocale en ligne Introduction : Avec le développement continu de la technologie, la technologie de reconnaissance vocale est devenue une partie importante du domaine de l'intelligence artificielle. Le système de reconnaissance vocale en ligne basé sur WebSocket et JavaScript présente les caractéristiques d'une faible latence, d'un temps réel et d'une multiplateforme, et est devenu une solution largement utilisée. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de reconnaissance vocale en ligne.

Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS Apr 03, 2024 am 11:55 AM

La technologie de détection et de reconnaissance des visages est déjà une technologie relativement mature et largement utilisée. Actuellement, le langage d'application Internet le plus utilisé est JS. La mise en œuvre de la détection et de la reconnaissance faciale sur le front-end Web présente des avantages et des inconvénients par rapport à la reconnaissance faciale back-end. Les avantages incluent la réduction de l'interaction réseau et de la reconnaissance en temps réel, ce qui réduit considérablement le temps d'attente des utilisateurs et améliore l'expérience utilisateur. Les inconvénients sont les suivants : il est limité par la taille du modèle et la précision est également limitée ; Comment utiliser js pour implémenter la détection de visage sur le web ? Afin de mettre en œuvre la reconnaissance faciale sur le Web, vous devez être familier avec les langages et technologies de programmation associés, tels que JavaScript, HTML, CSS, WebRTC, etc. Dans le même temps, vous devez également maîtriser les technologies pertinentes de vision par ordinateur et d’intelligence artificielle. Il convient de noter qu'en raison de la conception du côté Web

Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies avec PHP et JS Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies avec PHP et JS Dec 17, 2023 pm 06:55 PM

Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies en PHP et JS. Des exemples de code spécifiques sont nécessaires. Avec le développement rapide d'Internet et de la technologie, le trading d'actions est devenu l'un des moyens importants pour de nombreux investisseurs. L'analyse boursière est une partie importante de la prise de décision des investisseurs, et les graphiques en bougies sont largement utilisés dans l'analyse technique. Apprendre à dessiner des graphiques en bougies à l'aide de PHP et JS fournira aux investisseurs des informations plus intuitives pour les aider à prendre de meilleures décisions. Un graphique en chandeliers est un graphique technique qui affiche les cours des actions sous forme de chandeliers. Il montre le cours de l'action

WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel Dec 17, 2023 pm 05:30 PM

WebSocket et JavaScript : technologies clés pour réaliser des systèmes de surveillance en temps réel Introduction : Avec le développement rapide de la technologie Internet, les systèmes de surveillance en temps réel ont été largement utilisés dans divers domaines. L'une des technologies clés pour réaliser une surveillance en temps réel est la combinaison de WebSocket et de JavaScript. Cet article présentera l'application de WebSocket et JavaScript dans les systèmes de surveillance en temps réel, donnera des exemples de code et expliquera leurs principes de mise en œuvre en détail. 1. Technologie WebSocket

Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel Dec 17, 2023 pm 12:09 PM

Introduction à l'utilisation de JavaScript et de WebSocket pour mettre en œuvre un système de commande en ligne en temps réel : avec la popularité d'Internet et les progrès de la technologie, de plus en plus de restaurants ont commencé à proposer des services de commande en ligne. Afin de mettre en œuvre un système de commande en ligne en temps réel, nous pouvons utiliser les technologies JavaScript et WebSocket. WebSocket est un protocole de communication full-duplex basé sur le protocole TCP, qui peut réaliser une communication bidirectionnelle en temps réel entre le client et le serveur. Dans le système de commande en ligne en temps réel, lorsque l'utilisateur sélectionne des plats et passe une commande

Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript Dec 17, 2023 am 09:39 AM

Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de réservation en ligne. À l'ère numérique d'aujourd'hui, de plus en plus d'entreprises et de services doivent fournir des fonctions de réservation en ligne. Il est crucial de mettre en place un système de réservation en ligne efficace et en temps réel. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de réservation en ligne et fournit des exemples de code spécifiques. 1. Qu'est-ce que WebSocket ? WebSocket est une méthode full-duplex sur une seule connexion TCP.

JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel Dec 17, 2023 pm 05:13 PM

JavaScript et WebSocket : Construire un système efficace de prévisions météorologiques en temps réel Introduction : Aujourd'hui, la précision des prévisions météorologiques revêt une grande importance pour la vie quotidienne et la prise de décision. À mesure que la technologie évolue, nous pouvons fournir des prévisions météorologiques plus précises et plus fiables en obtenant des données météorologiques en temps réel. Dans cet article, nous apprendrons comment utiliser la technologie JavaScript et WebSocket pour créer un système efficace de prévisions météorologiques en temps réel. Cet article démontrera le processus de mise en œuvre à travers des exemples de code spécifiques. Nous

Conseils de développement PHP et JS : maîtrisez la méthode de création de graphiques en bougies boursières Conseils de développement PHP et JS : maîtrisez la méthode de création de graphiques en bougies boursières Dec 18, 2023 pm 03:39 PM

Avec le développement rapide de la finance sur Internet, l'investissement en actions est devenu le choix de plus en plus de personnes. Dans le trading d'actions, les graphiques en bougies sont une méthode d'analyse technique couramment utilisée. Ils peuvent montrer l'évolution des cours des actions et aider les investisseurs à prendre des décisions plus précises. Cet article présentera les compétences de développement de PHP et JS, amènera les lecteurs à comprendre comment dessiner des graphiques en bougies boursières et fournira des exemples de code spécifiques. 1. Comprendre les graphiques en bougies boursières Avant de présenter comment dessiner des graphiques en bougies boursières, nous devons d'abord comprendre ce qu'est un graphique en bougies. Les graphiques en chandeliers ont été développés par les Japonais

See all articles