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
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
JavaScript BOM erklärt
Inhaltsverzeichnis 1. BOM-Einführung 1. JavaScrip...
CocosCreator Skelettanimation Drachenknochen
CocosCreator Version 2.3.4 Drachenknochenanimatio...
Verstehen Sie die Prinzipien und Anwendungen von JSONP in einem Artikel
Inhaltsverzeichnis Was ist JSONP JSONP-Prinzip JS...
Gängige Methoden der Vue-Komponentenbildung: Übertragung und Kommunikation von Komponentenwerten
Verwandte Wissenspunkte Übergeben von Werten von ...
So erstellen Sie einen Elastic-Stack-Cluster mit mehreren Knoten auf RHEL8/CentOS8
Elastic Stack, allgemein bekannt als ELK Stack, i...
jQuery erzielt Ein- und Ausblendeffekte
Bevor wir jQuery verwenden, um den Ein- und Ausbl...
Detailliertes Tutorial zum Minimieren der Installation der virtuellen CentOS 8.1-Maschine in VirtualBox
1. Laden Sie zugehörige Tools und Bilder herunter...
JavaScript-Makrotasks und Mikrotasks
Makrotasks und Mikrotasks JavaScript ist eine Sin...
Beispielcode mit Vue-Router in HTML
Einführung in Vue und Vue-Router <script src=&...
Analyse der Verwendung der Funktion zur sofortigen Ausführung in JavaScript
Wir wissen, dass eine Funktion im Allgemeinen auf...
Nativer JS-Musikplayer
In diesem Artikelbeispiel wird der spezifische JS...
Der Unterschied zwischen MySQL count(1), count(*) und count(field)
Inhaltsverzeichnis 1. Erster Blick auf COUNT 2. D...
Verwendung des Linux-Crontab-Befehls
1. Befehlseinführung Der Befehl contab (Cron-Tabe...
Ursachen und Lösungen für Verzögerungen bei der MySQL-Master-Slave-Synchronisierung
Aus historischen Gründen basiert die MySQL-Replik...
Axios storniert Anfragen und vermeidet doppelte Anfragen
Inhaltsverzeichnis Herkunft Status Quo Anfrage ab...