So verhindern Sie, dass Iframes in HTML zur Seite springen, und verwenden Iframes, um die WeChat-Webversion in die Seite einzubetten

So verhindern Sie, dass Iframes in HTML zur Seite springen, und verwenden Iframes, um die WeChat-Webversion in die Seite einzubetten

Ich möchte nur eine kleine Sache machen, die Winform mit HTML5 kombiniert, und plötzlich habe ich Interesse, eine WeChat-Webversion darin einzubetten.

Nun, wenn die Idee erst einmal da ist, lasst uns handeln. Das Endergebnis ist wie folgt:

Zu Beginn hatte ich vor, ein Iframe in die Seite einzubetten, das auf https://wx.qq.com verweist, aber ich war zu naiv und die WeChat-Webversion sprang automatisch. Die Ergebnisse sind wie folgt:

Daher habe ich online nach einer Möglichkeit gesucht, Iframe-Weiterleitungen zu verhindern. Dazu muss man dem Iframe-Tag zwei Attribute hinzufügen: security="restricted" und sandbox="". Ersteres ist die IE-Funktion zum Deaktivieren von js und letzteres ist eine Funktion von HTML5.

Verwenden Sie sandbox="allow-scripts allow-same-origin allow-popups" um Weiterleitungen zu verhindern. Das Ergebnis ist jedoch folgendes:

Dann habe ich festgestellt, dass dieser Sprung tatsächlich darin besteht, die Originalseite zu schließen und dann zur Sprungseite zu navigieren. Daher können Sie das Seitenschließereignis onbeforeunload verwenden, um den Sprung zu verhindern. Fügen Sie der Seite daher den folgenden Code hinzu:

 document.body.onbeforeunload = Funktion (Ereignis) {
             var rel = "asdfawfewf";
             wenn (!window.event) {
                Ereignis.Rückgabewert = rel;
            } anders {
                Fenster.Ereignis.Rückgabewert = rel;
             }
         };

Dann stellte ich fest, dass das Ergebnis immer noch so war:

Was ist der Grund? Keine Reaktion auf den Vorfall? Oder ist der Sprung der WeChat-Webversion einfach zu großartig? Diesen Vorfall einfach ignorieren? Also habe ich ein leeres HTML erstellt und nur dieses Ereignis zur Überprüfung hinzugefügt.

<!DOCTYPE html> 
  <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <Kopf>
      <meta charset="utf-8" />
      <Titel></Titel>
  </Kopf>
  <Körper></Körper>
  <Skript>
document.body.onbeforeunload = Funktion (Ereignis) {
    var rel = "asdfawfewf";
     wenn (!window.event) {
         Ereignis.Rückgabewert = rel;
     } anders {
         Fenster.Ereignis.Rückgabewert = rel;
     }
 };
 </Skript>
 </html>

Das Ergebnis ist machbar:

Nach dem Einbetten des Iframes in die Seite springt diese jedoch direkt. Sie können den folgenden Code ausprobieren.

<!DOCTYPE html> 
  <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <Kopf>
      <meta charset="utf-8" />
      <Titel></Titel>
  </Kopf>
  <Text>
      <iframe src="https://wx.qq.com/" frameborder="0" style="position: absolute;border: navajowhite;links: 0;höhe: calc(100% - 30px);breite:100%">
     </iframe>
 </body>
 <Skript>
 document.body.onbeforeunload = Funktion (Ereignis) {
     var rel = "asdfawfewf";
     wenn (!window.event) {
         Ereignis.Rückgabewert = rel;
     } anders {
         Fenster.Ereignis.Rückgabewert = rel;
     }
 };
 </Skript>
 </html>

Wenn ich nicht weiterkam, habe ich diese Methode immer wieder ein- und ausgeschaltet, um zu sehen, ob sie funktioniert. Plötzlich stellte ich fest, dass das Ereignis onbeforeunload nicht ausgelöst wird, wenn die Seite innerhalb kurzer Zeit nach dem Öffnen geschlossen wird. Wenn Sie einige Sekunden warten und dann die Seite schließen, wird das Ereignis ausgelöst und eine Eingabeaufforderung angezeigt.

Versuchen Sie, das Iframe zu verzögern, um den Quellwert zuzuweisen (hier wird auf JQuery verwiesen).

<!DOCTYPE html>
  <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <Kopf>
      <meta charset="utf-8" />
     <Titel></Titel>
      <script src="scripts/jquery-2.2.3.js"></script>
  </Kopf>
  <Text>
      <iframe id="iframe" frameborder="0" style="position: absolute;border: navajowhite;links: 0;höhe: calc(100% - 30px);breite:100%">
     </iframe>
 </body>
 <Skript>
 $(Funktion () {
     setzeTimeout(Funktion () {
         iframe.src = "https://wx.qq.com/";
     },5000);
 });
 document.body.onbeforeunload = Funktion (Ereignis) {
     var rel = "asdfawfewf";
     wenn (!window.event) {
         Ereignis.Rückgabewert = rel;
     } anders {
         Fenster.Ereignis.Rückgabewert = rel;
     }
 };
 </Skript>
 </html>

Das Ergebnis war erfolgreich. Sie werden gefragt, ob Sie diese Seite verlassen möchten. Klicken Sie auf die Schaltfläche Bleiben. Kein Sprung nach vorne beim Erfolg. Das Bild unten zeigt mein fertiges Produkt.

Es ist geschafft. Sie können normal chatten und Dateien übertragen, aber keine Screenshots machen.

Der Nachteil besteht darin, dass Sie zum Abschließen der Anmeldung zweimal auf die Popup-Schaltfläche „Abbrechen“ klicken müssen. Das erste Mal wird die Seite geöffnet. Das zweite Mal wird nach dem Scannen des Codes erneut auf die Seite gesprungen. Derzeit gibt es keine Möglichkeit, dieses Problem zu lösen. Ich hoffe, dass Freunde, die wissen, wie man dieses Problem löst, mir einige Vorschläge machen können. Ich werde Ihnen umgehend antworten. Vielen Dank für Ihre Unterstützung der Website 123WORDPRESS.COM!

<<:  Detaillierte Erläuterung der persistenten MySQL-Statistiken

>>:  Implementierung des Whack-a-Mole-Spiels in JavaScript

Artikel empfehlen

Tutorial zur Konfiguration und Verwendung des MySQL-Protokolls für langsame Abfragen

Vorwort Das MySQL Slow Query Log ist eine Funktio...

Umfassende Interpretation der MySQL Master-Slave-Replikation, vom Prinzip bis zur Installation und Konfiguration

Warum brauchen wir Master-Slave-Replikation? 1. I...

Ein Artikel, der Ihnen HTML beibringt

Wenn Sie nicht unbedingt Künstler werden möchten,...

Tutorial zur Installation und Konfiguration von MySQL 5.7 unter CentOS7 (YUM)

Installationsumgebung: CentOS7 64-Bit, MySQL5.7 1...

Beispielcode zur Implementierung eines Radardiagramms mit vue+antv

1. Abhängigkeit herunterladen npm installiere @an...

React+axios implementiert die Suchbenutzerfunktion von GitHub (Beispielcode)

laden Anforderung erfolgreich Anforderung fehlges...

Front-End-JavaScript versteht Funktions-Currying gründlich

Inhaltsverzeichnis 1. Was ist Curry 2. Verwendung...

So kapseln Sie Axios einfach in Vue

Axios in Vue einfügen importiere Axios von „Axios...

Tutorial zum Bereitstellen von JDK und Tomcat auf CentOS7 ohne Schnittstelle

1. Installieren Sie xshell6 2. Stellen Sie eine S...

WeChat-Applet-Canvas implementiert Signaturfunktion

Im WeChat-Applet-Projekt umfasst das Entwicklungs...

Verwenden Sie Nginx, um einen Streaming-Media-Server zu erstellen und die Live-Übertragungsfunktion zu realisieren

Vorne geschrieben In den letzten Jahren ist die L...

Vue realisiert einen dynamischen Fortschrittsbalkeneffekt

In diesem Artikelbeispiel wird der spezifische Co...

Setzen Sie das Attribut „contenteditable“, um den Inhalt von HTML-Tags zu bearbeiten (kann Textarea ersetzen).

Code kopieren Der Code lautet wie folgt: <div ...

Vue echarts realisiert horizontales Balkendiagramm

In diesem Artikel wird der spezifische Code von V...

Detaillierte Erklärung der Javascript-Grundlagenschleife

Inhaltsverzeichnis Zyklus für für-in für-von währ...