communauté

Apprendre

Bibliothèque d'outils

Outils d'IA

Loisirs

Français

Maison

interface Web

js tutoriel

Fonctionnement du framework JavaScript (iframe) summary_javascript skills

Fonctionnement du framework JavaScript (iframe) summary_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:52 PM

iframe javascript

Aperçu de la programmation-cadre

Une page HTML peut avoir un ou plusieurs sous-cadres. Ces sous-cadres sont marqués par La programmation-cadre discutée ici inclut l'autocontrôle des frameworks et l'accès mutuel entre les frameworks, comme le référencement de variables JavaScript dans un autre framework à partir d'un framework, l'appel de fonctions dans d'autres frameworks, le contrôle du comportement des formulaires dans un autre framework, etc. </p> <p><strong>Références entre les images</strong></p> <p>Tous les cadres d'une page sont fournis en tant qu'attributs de l'objet fenêtre sous la forme d'une collection. Par exemple : window.frames représente la collection de tous les cadres de la page. Ceci est similaire aux objets de formulaire, aux objets de lien, aux images. objets, etc. La différence est que ces collections sont des propriétés du document. Ainsi, pour référencer un sous-frame, vous pouvez utiliser la syntaxe suivante : <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="31669" class="copybut" id="copybut31669" onclick="doCopy('code31669')"><u> Copiez le code </u></a></span> Le code est le suivant : </div> <div class="codebody" id="code31669">window.frames["frameName"];<br>window.frames.frameName<br>window.frames[index]</div> <br>Parmi eux, le mot window peut également être remplacé ou omis par self, en supposant que frameName soit le premier de la page Frame, les méthodes d'écriture suivantes sont équivalentes : <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="23383" class="copybut" id="copybut23383" onclick="doCopy('code23383')"><u>Copier le code</u></a></span> Le code est le suivant : </div> <div class="codebody" id="code23383">self.frames[ "frameName"]<br>self.frames[0]<br>frames[0]<br>frameName</div> <br>Chaque frame correspond à une page HTML, donc ceci frame est également une fenêtre de navigateur indépendante. Elle possède toutes les propriétés d'une fenêtre. La référence au frame est également une référence à l'objet window. Avec cet objet window, vous pouvez facilement utiliser les pages qu'il contient, par exemple en utilisant l'objet window.document pour écrire des données sur la page, en utilisant la propriété window.location pour changer la page dans le cadre, etc. <p>Ce qui suit présente les références mutuelles entre les différents niveaux de frameworks : </p> <p><strong>1． Référence du cadre parent au cadre enfant</strong></p> <p>Connaissant les principes ci-dessus, il est très simple de référencer le frame enfant à partir du frame parent, c'est-à-dire : <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="1357" class="copybut" id="copybut1357" onclick="doCopy('code1357')"><u>Copier le code</u></a></span> Le code est le suivant : </div> <div class="codebody" id="code1357">window.frames["frameName"];</div> <br>Ceci fait référence au sous-cadre nommé frameName dans la page. Si vous souhaitez référencer un sous-cadre au sein d'un sous-cadre, selon la nature du cadre référencé, qui est en fait l'objet fenêtre, vous pouvez l'implémenter comme ceci : <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="40877" class="copybut" id="copybut40877" onclick="doCopy('code40877')"><u>Copier code</u></a></span> Le code est le suivant : </div> <div class="codebody" id="code40877">window.frames["frameName"].frames["frameName2"];</div> <br>De cette façon, le deuxième -Le sous-trame de niveau est référencé, et ainsi de suite, un cadre multicouche peut être implémenté en citation. <p><strong>2． Référence du frame enfant au frame parent </strong></p> <p>Chaque objet fenêtre possède un attribut parent, représentant son cadre parent. Si le cadre est déjà un cadre de niveau supérieur, window.parent représente également le cadre lui-même. </p> <p><strong>3． Références entre frameworks frères </strong></p> <p>Si deux frames sont des sous-frames d'un même frame, ils sont appelés frames frères et peuvent se référencer via le frame parent. Par exemple, une page comprend 2 sous-frames : <br></p> <div class="codetitle"> <span>. <a style="CURSOR: pointer" data="22315" class="copybut" id="copybut22315" onclick="doCopy('code22315')"> <u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code22315"><frameset rows="50%,50%"><br> <frame src ="1.html" name="frame1" /><br> <frame src="2.html" name="frame2" /><br></frameset></div> <br>Vous peut utiliser l'instruction suivante dans frame1 Pour référencer frame2 : <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="4561" class="copybut" id="copybut4561" onclick="doCopy('code4561')"><u>Copier le code </u></a></span> Le code est le suivant : </div> <div class="codebody" id="code4561">self .parent.frames["frame2"]; </div> <p><strong>4． Références mutuelles entre cadres à différents niveaux</strong></p> <p>La hiérarchie des frames concerne les frames de niveau supérieur. Lorsque les niveaux sont différents, tant que vous connaissez le niveau auquel vous vous trouvez ainsi que le niveau et le nom de l'autre frame, vous pouvez facilement accéder les uns aux autres en utilisant les propriétés de l'objet window référencé par le frame, par exemple : <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="31264" class="copybut" id="copybut31264" onclick="doCopy('code31264')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code31264">self.parent.frames["childName"].frames[" targetFrameName"];</div> <p><strong>5． Référence au cadre de niveau supérieur </strong></p> <p>Semblable à l'attribut parent, l'objet window possède également un attribut top. Il représente une référence au cadre de niveau supérieur, qui peut être utilisée pour déterminer si un cadre lui-même est un cadre de niveau supérieur, par exemple : <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="51154" class="copybut" id="copybut51154" onclick="doCopy('code51154')"><u>Copier le code</u></a></span> Codez comme suit :</div> <div class="codebody" id="code51154">//Déterminez si ce cadre est un cadre de niveau supérieur<br>if(self==top){<br> //dosomething<br>} </div> <p><strong>Changer la page de chargement du cadre</strong></p> <p>La référence au cadre est une référence à l'objet fenêtre. En utilisant l'attribut location de l'objet fenêtre, vous pouvez modifier la navigation du cadre, par exemple : <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="18042" class="copybut" id="copybut18042" onclick="doCopy('code18042')"><u>Copier le code </u></a></span> Le code est le suivant : </div> <div class="codebody" id="code18042">window.frames[0].location="1.html";</div> <br>Cela redirigera le page du premier cadre de la page à 1 .html, en profitant de cette propriété, vous pouvez même utiliser un seul lien pour mettre à jour plusieurs cadres. <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="17379" class="copybut" id="copybut17379" onclick="doCopy('code17379')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code17379"><frameset rows="50%,50%" ><br> <frame src="1.html" name="frame1" /><br> <frame src="2.html" name="frame2" /><br></ frameset>&lt ;!--somecode--><br><a href="frame1.location='3.html;frame2.location='4.html'" onclick="">link</a&gt ;<BR></div> <p><strong>Référencement de variables et de fonctions JavaScript dans d'autres frameworks<br></strong><br>Avant d'introduire la technique de référencement de variables et de fonctions JavaScript dans d'autres frameworks, jetons un œil au code suivant : <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="92811" class="copybut" id="copybut92811" onclick="doCopy('code92811')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code92811">function hello(){<br> alert("hello,ajax!" );<br> }<br>window.hello();</div> <br>Si vous exécutez ce code, une fenêtre "hello, ajax!" apparaîtra, résultat de l'exécution de la fonction hello(). . Alors pourquoi hello() est-il devenu une méthode de l'objet window ? Parce que toutes les variables globales et fonctions globales définies dans une page sont membres de l'objet window. Par exemple : <br>var a=1;<br>alert(window.a);[/code]<br> fera apparaître une boîte de dialogue affichant 1. Le même principe s'applique au partage de variables et de fonctions entre différents frameworks en les appelant via l'objet window. <br>Par exemple : une page de navigation de produits se compose de deux sous-cadres. Le côté gauche représente le lien de la catégorie de produit ; lorsque l'utilisateur clique sur le lien de la catégorie, la liste des produits correspondante s'affiche sur le côté droit ; cliquez sur le lien [Acheter] à côté du produit Ajouter des articles au panier. <br>Dans cet exemple, vous pouvez utiliser la page de navigation de gauche pour stocker les produits que l'utilisateur souhaite acheter, car lorsque l'utilisateur clique sur le lien de navigation, ce qui change est une autre page, la page d'affichage du produit, tandis que la page de navigation elle-même reste inchangé. Ainsi, les variables JavaScript qu'il contient ne seront pas perdues et pourront être utilisées pour stocker des données globales. Le principe de mise en œuvre est le suivant : <br> Supposons que la page de gauche soit link.html et la page de droite soit show.html. La structure de la page est la suivante : <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="66513" class="copybut" id="copybut66513" onclick="doCopy('code66513')"><u>. Copier le code </u></a></span> Le code est le suivant :</div> <div class="codebody" id="code66513"> <br><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><br><html><br> <head><br><title> Nouveau document </title><br></head><br><frameset cols="20%,80%" ><br> <frame src ="link.html" name="link" /><br> <frame src="show.html" name="show" /><br></ jeu de cadres><br></html&gt ;<BR></div></P> <P>Vous pouvez ajouter une déclaration comme celle-ci à côté des produits affichés dans show.html : <BR><a href="void(0)" onclick="self.parent.link.addToOrders(32068)"> Ajouter au Shopping Che</a><br>où le lien représente le cadre de navigation. Le tableau arrOrders est défini dans la page link.html pour stocker l'identifiant du produit. La fonction addToOrders() est utilisée pour répondre à l'événement de clic. du lien [Achat] à côté du produit. Il Le paramètre id reçu représente l'ID du produit Dans l'exemple, il s'agit d'un produit avec un ID de 32068 : <br><div class="codetitle"><span><a style="CURSOR: pointer" data="18851" class="copybut" id="copybut18851" onclick="doCopy('code18851')"><.>Copiez le code <u></u></.></a> Le code est le suivant : </span></div>var arrOrders=new Array();<div class="codebody" id="code18851">function addToOrders(id){<br> arrOrders.push( identifiant);<br>}<br><br>De cette façon, vous pouvez utiliser arrOrders pour préparer tous les produits à être achetés sur la page de paiement ou sur la page de navigation du panier. <br>Le framework peut diviser une page en plusieurs modules avec des fonctions indépendantes. Chaque module est indépendant les uns des autres, mais peut être connecté via la référence de l'objet window. C'est un mécanisme important dans le développement Web. Dans le développement Ajax, vous pouvez également utiliser des cadres cachés pour implémenter diverses techniques. Lors de l'introduction ultérieure d'exemples de programmation Ajax, vous constaterez que cette technologie sera utilisée pour télécharger des fichiers sans actualiser et résoudre les problèmes d'Ajax en avant et en arrière. </div> </div> </div> </div> <div class="wzconShengming_sp"> <div class="bzsmdiv_sp">Déclaration de ce site Web</div> <div>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</div> </div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>  <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Outils d'IA chauds</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/fr/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/fr/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>Application basée sur l'IA pour créer des photos de nu réalistes</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/fr/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/fr/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>Outil d'IA en ligne pour supprimer les vêtements des photos.</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/fr/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/fr/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>Images de déshabillage gratuites</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/fr/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/fr/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>Dissolvant de vêtements AI</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/fr/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173405034393877.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Hentai Generator" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/fr/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_title"> <h3>AI Hentai Generator</h3> </a> <p>Générez AI Hentai gratuitement.</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/fr/ai">Afficher plus</a> </div> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Article chaud</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/fr/faq/1796780570.html" title="R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2 Il y a quelques semaines</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/fr/faq/1796775427.html" title="Combien de temps faut-il pour battre Split Fiction?" class="phpgenera_Details_mainR4_bottom_title">Combien de temps faut-il pour battre Split Fiction?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 Il y a quelques mois</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/fr/faq/1796780641.html" title="R.E.P.O. Meilleurs paramètres graphiques" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Meilleurs paramètres graphiques</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2 Il y a quelques semaines</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/fr/faq/1796785841.html" title="Assassin's Creed Shadows: Solution d'énigmes de coquille" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Solution d'énigmes de coquille</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 Il y a quelques semaines</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/fr/faq/1796780520.html" title="R.E.P.O. Comment réparer l'audio si vous n'entendez personne" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Comment réparer l'audio si vous n'entendez personne</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2 Il y a quelques semaines</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/fr/article.html">Afficher plus</a> </div> </div> </div> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Outils chauds</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/fr/toolset/development-tools/92" title="Bloc-notes++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Bloc-notes++7.3.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/fr/toolset/development-tools/92" title="Bloc-notes++7.3.1" class="phpmain_tab2_mids_title"> <h3>Bloc-notes++7.3.1</h3> </a> <p>Éditeur de code facile à utiliser et gratuit</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/fr/toolset/development-tools/93" title="SublimeText3 version chinoise" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 version chinoise" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/fr/toolset/development-tools/93" title="SublimeText3 version chinoise" class="phpmain_tab2_mids_title"> <h3>SublimeText3 version chinoise</h3> </a> <p>Version chinoise, très simple à utiliser</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/fr/toolset/development-tools/121" title="Envoyer Studio 13.0.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Envoyer Studio 13.0.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/fr/toolset/development-tools/121" title="Envoyer Studio 13.0.1" class="phpmain_tab2_mids_title"> <h3>Envoyer Studio 13.0.1</h3> </a> <p>Puissant environnement de développement intégré PHP</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/fr/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/fr/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"> <h3>Dreamweaver CS6</h3> </a> <p>Outils de développement Web visuel</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/fr/toolset/development-tools/500" title="SublimeText3 version Mac" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 version Mac" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/fr/toolset/development-tools/500" title="SublimeText3 version Mac" class="phpmain_tab2_mids_title"> <h3>SublimeText3 version Mac</h3> </a> <p>Logiciel d'édition de code au niveau de Dieu (SublimeText3)</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/fr/ai">Afficher plus</a> </div> </div> </div> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Sujets chauds</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/fr/faq/gmailyxdlrkzn" title="Où se trouve l'entrée de connexion pour la messagerie Gmail ?" class="phpgenera_Details_mainR4_bottom_title">Où se trouve l'entrée de connexion pour la messagerie Gmail ?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>7401</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>15</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/fr/faq/java-tutorial" title="Tutoriel Java" class="phpgenera_Details_mainR4_bottom_title">Tutoriel Java</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1630</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>14</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/fr/faq/cakephp-tutor" title="Tutoriel CakePHP" class="phpgenera_Details_mainR4_bottom_title">Tutoriel CakePHP</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1358</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>52</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/fr/faq/laravel-tutori" title="Tutoriel Laravel" class="phpgenera_Details_mainR4_bottom_title">Tutoriel Laravel</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1268</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>25</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/fr/faq/php-tutorial" title="Tutoriel PHP" class="phpgenera_Details_mainR4_bottom_title">Tutoriel PHP</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1217</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>29</span> </div> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/fr/faq/zt">Afficher plus</a> </div> </div> </div> </div> </div> <div class="Article_Details_main2"> <div class="phpgenera_Details_mainL4"> <div class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div class="phpgenera_Details_mainL4_info"> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/fr/faq/633424.html" title="Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170279609162144.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript" /> </a> <a href="https://www.php.cn/fr/faq/633424.html" title="Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript" class="phphistorical_Version2_mids_title">Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript</a> <span class="Articlelist_txts_time">Dec 17, 2023 pm 02:54 PM</span> <p class="Articlelist_txts_p">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.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/fr/faq/633480.html" title="WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/465/014/170280543760094.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel" /> </a> <a href="https://www.php.cn/fr/faq/633480.html" title="WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel" class="phphistorical_Version2_mids_title">WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel</a> <span class="Articlelist_txts_time">Dec 17, 2023 pm 05:30 PM</span> <p class="Articlelist_txts_p">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</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/fr/faq/633311.html" title="Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170277714783917.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript" /> </a> <a href="https://www.php.cn/fr/faq/633311.html" title="Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript" class="phphistorical_Version2_mids_title">Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript</a> <span class="Articlelist_txts_time">Dec 17, 2023 am 09:39 AM</span> <p class="Articlelist_txts_p">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.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/fr/faq/633365.html" title="Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170278617570921.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel" /> </a> <a href="https://www.php.cn/fr/faq/633365.html" title="Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel" class="phphistorical_Version2_mids_title">Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel</a> <span class="Articlelist_txts_time">Dec 17, 2023 pm 12:09 PM</span> <p class="Articlelist_txts_p">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</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/fr/faq/680640.html" title="Surveiller le comportement de défilement des iframes" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170826002711274.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Surveiller le comportement de défilement des iframes" /> </a> <a href="https://www.php.cn/fr/faq/680640.html" title="Surveiller le comportement de défilement des iframes" class="phphistorical_Version2_mids_title">Surveiller le comportement de défilement des iframes</a> <span class="Articlelist_txts_time">Feb 18, 2024 pm 08:40 PM</span> <p class="Articlelist_txts_p">Comment surveiller le défilement d'une iframe nécessite des exemples de code spécifiques Lorsque nous utilisons la balise iframe pour intégrer d'autres pages Web dans une page Web, nous devons parfois effectuer certaines opérations spécifiques sur le contenu de l'iframe. L'un des besoins courants est d'écouter l'événement de défilement de l'iframe afin que le code correspondant puisse être exécuté lorsque le défilement se produit. Ce qui suit explique comment utiliser JavaScript pour surveiller le défilement d'une iframe et fournit des exemples de code spécifiques à titre de référence. Récupérer l'élément iframe Tout d'abord, nous avons besoin</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/fr/faq/633476.html" title="JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/465/014/170280442251580.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel" /> </a> <a href="https://www.php.cn/fr/faq/633476.html" title="JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel" class="phphistorical_Version2_mids_title">JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel</a> <span class="Articlelist_txts_time">Dec 17, 2023 pm 05:13 PM</span> <p class="Articlelist_txts_p">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</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/fr/faq/642543.html" title="Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170444932683164.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP" /> </a> <a href="https://www.php.cn/fr/faq/642543.html" title="Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP" class="phphistorical_Version2_mids_title">Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP</a> <span class="Articlelist_txts_time">Jan 05, 2024 pm 06:08 PM</span> <p class="Articlelist_txts_p">Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/fr/faq/630681.html" title="Comment utiliser insertBefore en javascript" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Comment utiliser insertBefore en javascript" /> </a> <a href="https://www.php.cn/fr/faq/630681.html" title="Comment utiliser insertBefore en javascript" class="phphistorical_Version2_mids_title">Comment utiliser insertBefore en javascript</a> <span class="Articlelist_txts_time">Nov 24, 2023 am 11:56 AM</span> <p class="Articlelist_txts_p">Utilisation : En JavaScript, la méthode insertBefore() est utilisée pour insérer un nouveau nœud dans l'arborescence DOM. Cette méthode nécessite deux paramètres : le nouveau nœud à insérer et le nœud de référence (c'est-à-dire le nœud où le nouveau nœud sera inséré).</p> </div> </div> <a href="https://www.php.cn/fr/web-designer.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</p> </div> <div class="footermid"> <a href="https://www.php.cn/fr/about/us.html">À propos de nous</a> <a href="https://www.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a> <a href="https://www.php.cn/fr/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1743956511"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function () { var u = "https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u + 'matomo.php']); _paq.push(['setSiteId', '9']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); })(); </script> <script> // top layui.use(function () { var util = layui.util; util.fixbar({ on: { mouseenter: function (type) { layer.tips(type, this, { tips: 4, fixed: true, }); }, mouseleave: function (type) { layer.closeAll("tips"); }, }, }); }); document.addEventListener("DOMContentLoaded", (event) => { // 定义一个函数来处理滚动链接的点击事件 function setupScrollLink(scrollLinkId, targetElementId) { const scrollLink = document.getElementById(scrollLinkId); const targetElement = document.getElementById(targetElementId); if (scrollLink && targetElement) { scrollLink.addEventListener("click", (e) => { e.preventDefault(); // 阻止默认链接行为 targetElement.scrollIntoView({ behavior: "smooth" }); // 平滑滚动到目标元素 }); } else { console.warn( `Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.` ); } } // 使用该函数设置多个滚动链接 setupScrollLink("Article_Details_main1L2s_1", "article_main_title1"); setupScrollLink("Article_Details_main1L2s_2", "article_main_title2"); setupScrollLink("Article_Details_main1L2s_3", "article_main_title3"); setupScrollLink("Article_Details_main1L2s_4", "article_main_title4"); setupScrollLink("Article_Details_main1L2s_5", "article_main_title5"); setupScrollLink("Article_Details_main1L2s_6", "article_main_title6"); // 可以继续添加更多的滚动链接设置 }); window.addEventListener("scroll", function () { var fixedElement = document.getElementById("Article_Details_main1Lmain"); var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器 var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度 var scrollHeight = document.documentElement.scrollHeight; // 页面总高度 // 计算距离底部的距离 var distanceToBottom = scrollHeight - scrollTop - clientHeight; // 当距离底部小于或等于300px时，取消固定定位 if (distanceToBottom <= 980) { fixedElement.classList.remove("Article_Details_main1Lmain"); fixedElement.classList.add("Article_Details_main1Lmain_relative"); } else { // 否则，保持固定定位 fixedElement.classList.remove("Article_Details_main1Lmain_relative"); fixedElement.classList.add("Article_Details_main1Lmain"); } }); </script> </body> </html>