Gemeinschaft

Lernen

Tools-Bibliothek

KI-Tools

Freizeit

Deutsch

Heim

Web-Frontend

js-Tutorial

Zusammenfassung der JavaScript-Framework-Operationen (Iframe)_Javascript-Kenntnisse

Zusammenfassung der JavaScript-Framework-Operationen (Iframe)_Javascript-Kenntnisse

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:52 PM

iframe javascript

Überblick über Framework-Programmierung

Eine HTML-Seite kann einen oder mehrere Subframes haben, die mit gekennzeichnet sind. Die hier besprochene Framework-Programmierung umfasst die Selbstkontrolle von Frameworks und den gegenseitigen Zugriff zwischen Frameworks, z. B. das Referenzieren von JavaScript-Variablen in einem anderen Framework von einem Framework aus, das Aufrufen von Funktionen in anderen Frameworks, die Steuerung des Verhaltens von Formularen in einem anderen Framework usw. </p> <p><strong>Referenzen zwischen Frames</strong></p> <p>Alle Frames auf einer Seite werden als Attribute des Fensterobjekts in Form einer Sammlung bereitgestellt. Beispiel: window.frames stellt die Sammlung aller Frames auf der Seite dar. Dies ähnelt Formularobjekten, Linkobjekten und Bildern Objekte usw. Der Unterschied besteht darin, dass diese Sammlungen Eigenschaften des Dokuments sind. Um auf einen Unterrahmen zu verweisen, können Sie daher die folgende Syntax verwenden: <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="31669" class="copybut" id="copybut31669" onclick="doCopy('code31669')"><u> Kopieren Sie den Code </u></a></span> Der Code lautet wie folgt: </div> <div class="codebody" id="code31669">window.frames["frameName"];<br>window.frames.frameName<br>window.frames[index]</div> <br>Unter diesen kann das Wort window auch durch self ersetzt oder weggelassen werden, Unter der Annahme, dass „frameName“ der erste Frame auf der Seite ist, sind die folgenden Schreibmethoden gleichwertig: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="23383" class="copybut" id="copybut23383" onclick="doCopy('code23383')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt: </div> <div class="codebody" id="code23383">self.frames[ "frameName"]<br>self.frames[0]<br>frames[0]<br>frameName</div> <br>Jeder Frame entspricht einer HTML-Seite, also dies Frame ist ebenfalls ein eigenständiges Browserfenster. Es verfügt über alle Eigenschaften eines Fensters. Die sogenannte Referenz auf das Frame ist auch eine Referenz auf das Fensterobjekt. Mit diesem Fensterobjekt können Sie die darin enthaltenen Seiten problemlos bedienen, z. B. mithilfe des window.document-Objekts Daten auf die Seite schreiben, mithilfe der window.location-Eigenschaft die Seite im Frame ändern usw. <p>Im Folgenden werden die gegenseitigen Bezüge zwischen verschiedenen Framework-Ebenen vorgestellt: </p> <p><strong>1． Referenz vom übergeordneten Frame zum untergeordneten Frame</strong></p> <p>Wenn Sie die oben genannten Prinzipien kennen, ist es sehr einfach, den untergeordneten Frame vom übergeordneten Frame aus zu referenzieren, das heißt: <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="1357" class="copybut" id="copybut1357" onclick="doCopy('code1357')"><u>Kopieren Sie den Code</u></a></span> Der Code lautet wie folgt: </div> <div class="codebody" id="code1357">window.frames["frameName"];</div> <br>Dies bezieht sich auf den Unterrahmen mit dem Namen „frameName“ auf der Seite. Wenn Sie einen Subframe innerhalb eines Subframes referenzieren möchten, können Sie dies entsprechend der Art des referenzierten Frames, bei dem es sich tatsächlich um das Fensterobjekt handelt, wie folgt implementieren: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="40877" class="copybut" id="copybut40877" onclick="doCopy('code40877')"><u>Kopieren Code</u></a></span> Der Code lautet wie folgt: </div> <div class="codebody" id="code40877">window.frames["frameName"].frames["frameName2"];</div> <br>Auf diese Weise der zweite Auf den Unterrahmen auf -Ebene wird verwiesen, und so weiter kann ein mehrschichtiges Rahmenwerk implementiert werden. <p><strong>2． Referenz vom untergeordneten Frame zum übergeordneten Frame </strong></p> <p>Jedes Fensterobjekt verfügt über ein übergeordnetes Attribut, das seinen übergeordneten Rahmen darstellt. Wenn der Frame bereits ein Frame der obersten Ebene ist, stellt window.parent auch den Frame selbst dar. </p> <p><strong>3． Referenzen zwischen Geschwister-Frameworks </strong></p> <p>Wenn zwei Frames Unterframes desselben Frames sind, werden sie als Geschwisterframes bezeichnet und können über den übergeordneten Frame aufeinander verweisen. Eine Seite enthält beispielsweise zwei Unterframes: <br></p> <div class="codetitle"> <span> <a style="CURSOR: pointer" data="22315" class="copybut" id="copybut22315" onclick="doCopy('code22315')"> <u>Code kopieren</u></a></span> Der Code lautet wie folgt:</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>Du Sie können die folgende Anweisung in Frame1 verwenden, um auf Frame2 zu verweisen: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="4561" class="copybut" id="copybut4561" onclick="doCopy('code4561')"><u>Code kopieren </u></a></span> Der Code lautet wie folgt: </div> <div class="codebody" id="code4561">self .parent.frames["frame2"]; </div> <p><strong>4． Gegenseitige Bezüge zwischen Frameworks auf verschiedenen Ebenen</strong></p> <p>Die Hierarchie der Frames gilt für Frames der obersten Ebene. Wenn die Ebenen unterschiedlich sind und Sie die Ebene, auf der Sie sich befinden, sowie die Ebene und den Namen des anderen Rahmens kennen, können Sie problemlos aufeinander zugreifen, indem Sie die Eigenschaften des Fensterobjekts verwenden, auf das der Rahmen verweist, zum Beispiel: <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="31264" class="copybut" id="copybut31264" onclick="doCopy('code31264')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code31264">self.parent.frames["childName"].frames[" targetFrameName"];</div> <p><strong>5． Verweis auf den Top-Level-Frame </strong></p> <p>Ähnlich wie das übergeordnete Attribut verfügt auch das Fensterobjekt über ein oberes Attribut. Es stellt einen Verweis auf den Top-Level-Frame dar, der verwendet werden kann, um zu bestimmen, ob ein Frame selbst ein Top-Level-Frame ist, zum Beispiel: <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="51154" class="copybut" id="copybut51154" onclick="doCopy('code51154')"><u>Code kopieren</u></a></span>Code wie folgt:</div> <div class="codebody" id="code51154">//Bestimmen Sie, ob dieser Frame ein Top-Level-Frame ist<br>if(self==top){<br> //dosomething<br>} </div> <p><strong>Ändern Sie die Ladeseite des Frames</strong></p> <p>Der Verweis auf den Rahmen ist ein Verweis auf das Fensterobjekt. Mithilfe des Standortattributs des Fensterobjekts können Sie die Navigation des Rahmens ändern, zum Beispiel: <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="18042" class="copybut" id="copybut18042" onclick="doCopy('code18042')"><u>Code kopieren </u></a></span> Der Code lautet wie folgt: </div> <div class="codebody" id="code18042">window.frames[0].location="1.html";</div> <br>Dadurch wird der umgeleitet Seite des ersten Frames auf der Seite in 1.html um. Mithilfe dieser Eigenschaft können Sie sogar einen einzelnen Link verwenden, um mehrere Frames zu aktualisieren. <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="17379" class="copybut" id="copybut17379" onclick="doCopy('code17379')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</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>Referenzieren von JavaScript-Variablen und -Funktionen in anderen Frameworks<br></strong><br>Bevor wir die Technik des Referenzierens von JavaScript-Variablen und -Funktionen in anderen Frameworks vorstellen, werfen wir einen Blick auf den folgenden Code: <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="92811" class="copybut" id="copybut92811" onclick="doCopy('code92811')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code92811">function hello(){<br> warning("hello,ajax!" );<br> }<br>window.hello();</div> <br>Wenn Sie diesen Code ausführen, wird ein „Hallo, Ajax!“-Fenster angezeigt, das das Ergebnis der Ausführung der hello()-Funktion ist . Warum wurde hello() zu einer Methode des Fensterobjekts? Denn alle innerhalb einer Seite definierten globalen Variablen und globalen Funktionen sind Mitglieder des Fensterobjekts. Beispiel: <br>var a=1;<br>alert(window.a);[/code]<br> öffnet ein Dialogfeld mit der Anzeige 1. Das gleiche Prinzip gilt für die gemeinsame Nutzung von Variablen und Funktionen zwischen verschiedenen Frameworks, indem diese über das Fensterobjekt aufgerufen werden. <br>Beispiel: Eine Produkt-Browsing-Seite besteht aus zwei Unterrahmen. Wenn der Benutzer auf den Kategorie-Link klickt, wird auf der rechten Seite die entsprechende Produktliste angezeigt Klicken Sie auf den Link [Kaufen] neben dem Produkt. Artikel in den Warenkorb legen. <br>In diesem Beispiel können Sie die linke Navigationsseite verwenden, um die Produkte zu speichern, die der Benutzer kaufen möchte, denn wenn der Benutzer auf den Navigationslink klickt, ändert sich eine andere Seite, die Produktanzeigeseite, während die Navigationsseite selbst bestehen bleibt unverändert, sodass die darin enthaltenen JavaScript-Variablen nicht verloren gehen und zum Speichern globaler Daten verwendet werden können. Das Implementierungsprinzip lautet wie folgt: <br> Angenommen, die linke Seite ist link.html und die rechte Seite ist show.html. Die Seitenstruktur ist wie folgt: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="66513" class="copybut" id="copybut66513" onclick="doCopy('code66513')"><u> Code kopieren </u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code66513"> <br><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><br><html><br> <head><br><title> Neues Dokument </title><br></head><br><frameset cols="20%,80%" ><br> <frame src="link.html" name="link" /><br> <frame src="show.html" name="show" /><br></ Frameset><br></html&gt ;<BR></div></P> <P>Sie können eine Anweisung wie diese neben den in show.html angezeigten Produkten hinzufügen: <BR><a href="void(0)" onclick="self.parent.link.addToOrders(32068)"> Zum Einkaufen hinzufügen Che</a><br>wobei link den Navigationsrahmen darstellt. Das Array arrOrders ist auf der Seite link.html definiert, um die ID des Produkts zu speichern. Die Funktion addToOrders() wird verwendet, um auf das Klickereignis zu reagieren des Links [Kauf] neben dem Produkt. Der empfangene Parameter id stellt die ID des Produkts dar. Im Beispiel handelt es sich um ein Produkt mit der ID 32068: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="18851" class="copybut" id="copybut18851" onclick="doCopy('code18851')"><u>Kopieren Sie den Code </u></a></span> Der Code lautet wie folgt: </div> <div class="codebody" id="code18851">var arrOrders=new Array();<br>function addToOrders(id){<br> arrOrders.push( id);<br>}</div> <br>Auf diese Weise können Sie arrOrders verwenden, um alle Produkte auf der Checkout-Seite oder der Warenkorb-Seite zum Kauf vorzubereiten. <br>Das Framework kann eine Seite in mehrere Module mit unabhängigen Funktionen unterteilen. Jedes Modul ist unabhängig voneinander, kann jedoch über die Referenz des Fensterobjekts verbunden werden. Dies ist ein wichtiger Mechanismus in der Webentwicklung. In der Ajax-Entwicklung können Sie auch versteckte Frames verwenden, um verschiedene Techniken zu implementieren. Wenn Sie später die Ajax-Beispielprogrammierung einführen, werden Sie feststellen, dass diese Technologie zum Hochladen von Dateien ohne Aktualisierung verwendet wird und die Vorwärts- und Rückwärtsprobleme von Ajax löst. </div> </div> </div> <div class="wzconShengming_sp"> <div class="bzsmdiv_sp">Erklärung dieser Website</div> <div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an 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>Heiße KI -Werkzeuge</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/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/de/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>KI-gestützte App zum Erstellen realistischer Aktfotos</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/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/de/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>Online-KI-Tool zum Entfernen von Kleidung aus Fotos.</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/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/de/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>Ausziehbilder kostenlos</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/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/de/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>KI-Kleiderentferner</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/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/de/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_title"> <h3>AI Hentai Generator</h3> </a> <p>Erstellen Sie kostenlos Ai Hentai.</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/de/ai">Mehr anzeigen</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>Heißer Artikel</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/1796780570.html" title="R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2 Wochen vor</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/1796775427.html" title="Wie lange dauert es, um Split Fiction zu schlagen?" class="phpgenera_Details_mainR4_bottom_title">Wie lange dauert es, um Split Fiction zu schlagen?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 Monate vor</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/1796775336.html" title="R.E.P.O. Dateispeicherspeicherort: Wo ist es und wie schützt sie?" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Dateispeicherspeicherort: Wo ist es und wie schützt sie?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 Monate vor</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/1796780641.html" title="R.E.P.O. Beste grafische Einstellungen" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Beste grafische Einstellungen</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2 Wochen vor</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/1796785841.html" title="Assassin's Creed Shadows: Seashell Riddle -Lösung" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Seashell Riddle -Lösung</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 Wochen vor</span> <span>By DDD</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/de/article.html">Mehr anzeigen</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>Heiße Werkzeuge</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/toolset/development-tools/92" title="Notepad++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="Notepad++7.3.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/de/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title"> <h3>Notepad++7.3.1</h3> </a> <p>Einfach zu bedienender und kostenloser Code-Editor</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/toolset/development-tools/93" title="SublimeText3 chinesische Version" 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 chinesische Version" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/de/toolset/development-tools/93" title="SublimeText3 chinesische Version" class="phpmain_tab2_mids_title"> <h3>SublimeText3 chinesische Version</h3> </a> <p>Chinesische Version, sehr einfach zu bedienen</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/toolset/development-tools/121" title="Senden Sie 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="Senden Sie Studio 13.0.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/de/toolset/development-tools/121" title="Senden Sie Studio 13.0.1" class="phpmain_tab2_mids_title"> <h3>Senden Sie Studio 13.0.1</h3> </a> <p>Leistungsstarke integrierte PHP-Entwicklungsumgebung</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/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/de/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"> <h3>Dreamweaver CS6</h3> </a> <p>Visuelle Webentwicklungstools</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/toolset/development-tools/500" title="SublimeText3 Mac-Version" 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 Mac-Version" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/de/toolset/development-tools/500" title="SublimeText3 Mac-Version" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac-Version</h3> </a> <p>Codebearbeitungssoftware auf Gottesniveau (SublimeText3)</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/de/ai">Mehr anzeigen</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>Heiße Themen</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/gmailyxdlrkzn" title="Wo ist der Login-Zugang für Gmail-E-Mail?" class="phpgenera_Details_mainR4_bottom_title">Wo ist der Login-Zugang für Gmail-E-Mail?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>7390</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/de/faq/java-tutorial" title="Java-Tutorial" class="phpgenera_Details_mainR4_bottom_title">Java-Tutorial</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/de/faq/cakephp-tutor" title="CakePHP-Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP-Tutorial</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1357</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/de/faq/laravel-tutori" title="Laravel-Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel-Tutorial</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/de/faq/php-tutorial" title="PHP-Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP-Tutorial</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1216</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/de/faq/zt">Mehr anzeigen</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/de/faq/633424.html" title="So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und 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="So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript" /> </a> <a href="https://www.php.cn/de/faq/633424.html" title="So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript" class="phphistorical_Version2_mids_title">So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript</a> <span class="Articlelist_txts_time">Dec 17, 2023 pm 02:54 PM</span> <p class="Articlelist_txts_p">So implementieren Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem. Einführung: Mit der kontinuierlichen Weiterentwicklung der Technologie ist die Spracherkennungstechnologie zu einem wichtigen Bestandteil des Bereichs der künstlichen Intelligenz geworden. Das auf WebSocket und JavaScript basierende Online-Spracherkennungssystem zeichnet sich durch geringe Latenz, Echtzeit und plattformübergreifende Eigenschaften aus und hat sich zu einer weit verbreiteten Lösung entwickelt. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem implementieren.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/de/faq/633480.html" title="WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen" 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 und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen" /> </a> <a href="https://www.php.cn/de/faq/633480.html" title="WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen" class="phphistorical_Version2_mids_title">WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen</a> <span class="Articlelist_txts_time">Dec 17, 2023 pm 05:30 PM</span> <p class="Articlelist_txts_p">WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/de/faq/633311.html" title="So implementieren Sie ein Online-Reservierungssystem mit WebSocket und 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="So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript" /> </a> <a href="https://www.php.cn/de/faq/633311.html" title="So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript" class="phphistorical_Version2_mids_title">So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript</a> <span class="Articlelist_txts_time">Dec 17, 2023 am 09:39 AM</span> <p class="Articlelist_txts_p">So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript. Im heutigen digitalen Zeitalter müssen immer mehr Unternehmen und Dienste Online-Reservierungsfunktionen bereitstellen. Es ist von entscheidender Bedeutung, ein effizientes Online-Reservierungssystem in Echtzeit zu implementieren. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Reservierungssystem implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist eine Vollduplex-Methode für eine einzelne TCP-Verbindung.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/de/faq/633365.html" title="Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems" 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="Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems" /> </a> <a href="https://www.php.cn/de/faq/633365.html" title="Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems" class="phphistorical_Version2_mids_title">Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems</a> <span class="Articlelist_txts_time">Dec 17, 2023 pm 12:09 PM</span> <p class="Articlelist_txts_p">Einführung in die Verwendung von JavaScript und WebSocket zur Implementierung eines Online-Bestellsystems in Echtzeit: Mit der Popularität des Internets und dem Fortschritt der Technologie haben immer mehr Restaurants damit begonnen, Online-Bestelldienste anzubieten. Um ein Echtzeit-Online-Bestellsystem zu implementieren, können wir JavaScript und WebSocket-Technologie verwenden. WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das auf dem TCP-Protokoll basiert und eine bidirektionale Kommunikation zwischen Client und Server in Echtzeit realisieren kann. Im Echtzeit-Online-Bestellsystem, wenn der Benutzer Gerichte auswählt und eine Bestellung aufgibt</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/de/faq/680640.html" title="Überwachen Sie das Scrollverhalten von 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="Überwachen Sie das Scrollverhalten von Iframes" /> </a> <a href="https://www.php.cn/de/faq/680640.html" title="Überwachen Sie das Scrollverhalten von Iframes" class="phphistorical_Version2_mids_title">Überwachen Sie das Scrollverhalten von Iframes</a> <span class="Articlelist_txts_time">Feb 18, 2024 pm 08:40 PM</span> <p class="Articlelist_txts_p">Um das Scrollen eines Iframes zu überwachen, sind bestimmte Codebeispiele erforderlich. Wenn wir das Iframe-Tag verwenden, um andere Webseiten in eine Webseite einzubetten, müssen wir manchmal bestimmte Vorgänge für den Inhalt im Iframe ausführen. Eine der häufigsten Anforderungen besteht darin, auf das Scroll-Ereignis des Iframes zu warten, damit der entsprechende Code beim Scrollen ausgeführt werden kann. Im Folgenden wird die Verwendung von JavaScript zum Überwachen des Scrollens eines Iframes vorgestellt und spezifische Codebeispiele als Referenz bereitgestellt. Holen Sie sich zuerst das iframe-Element</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/de/faq/633476.html" title="JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems" 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 und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems" /> </a> <a href="https://www.php.cn/de/faq/633476.html" title="JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems" class="phphistorical_Version2_mids_title">JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems</a> <span class="Articlelist_txts_time">Dec 17, 2023 pm 05:13 PM</span> <p class="Articlelist_txts_p">JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Einführung: Heutzutage ist die Genauigkeit von Wettervorhersagen für das tägliche Leben und die Entscheidungsfindung von großer Bedeutung. Mit der Weiterentwicklung der Technologie können wir genauere und zuverlässigere Wettervorhersagen liefern, indem wir Wetterdaten in Echtzeit erhalten. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und WebSocket-Technologie ein effizientes Echtzeit-Wettervorhersagesystem aufbauen. In diesem Artikel wird der Implementierungsprozess anhand spezifischer Codebeispiele demonstriert. Wir</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/de/faq/642543.html" title="Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode" 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="Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode" /> </a> <a href="https://www.php.cn/de/faq/642543.html" title="Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode" class="phphistorical_Version2_mids_title">Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode</a> <span class="Articlelist_txts_time">Jan 05, 2024 pm 06:08 PM</span> <p class="Articlelist_txts_p">JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/de/faq/630681.html" title="So verwenden Sie insertBefore in 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="So verwenden Sie insertBefore in Javascript" /> </a> <a href="https://www.php.cn/de/faq/630681.html" title="So verwenden Sie insertBefore in Javascript" class="phphistorical_Version2_mids_title">So verwenden Sie insertBefore in Javascript</a> <span class="Articlelist_txts_time">Nov 24, 2023 am 11:56 AM</span> <p class="Articlelist_txts_p">Verwendung: In JavaScript wird die Methode insertBefore() verwendet, um einen neuen Knoten in den DOM-Baum einzufügen. Diese Methode erfordert zwei Parameter: den neuen Knoten, der eingefügt werden soll, und den Referenzknoten (d. h. den Knoten, an dem der neue Knoten eingefügt wird).</p> </div> </div> <a href="https://www.php.cn/de/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>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p> </div> <div class="footermid"> <a href="https://www.php.cn/de/about/us.html">Über uns</a> <a href="https://www.php.cn/de/about/disclaimer.html">Haftungsausschluss</a> <a href="https://www.php.cn/de/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?1743910725"></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>