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
Der Unterschied zwischen HTML-Name-ID und Klasse_PowerNode Java Academy
Name Geben Sie einen Namen für das Tag an. Format...
So erstellen und implementieren Sie ein Node-Projekt mit Docker
Inhaltsverzeichnis Was ist Docker Clientseitiger ...
Der gesamte Prozess der Installation von Gogs mit Pagoda Panel und Docker
Inhaltsverzeichnis 1 Installieren Sie Docker im B...
js zur Implementierung einer Überprüfungscode-Interferenz (dynamisch)
In diesem Artikelbeispiel wird der spezifische Co...
So analysieren Sie die Attributschnittstelle zum Hinzufügen eines Dateisystems unter Linux oder Android
Der Erste: 1. Fügen Sie wichtige Headerdateien hi...
Der eigentliche Prozess der Einbindung von Axios in das Projekt
Inhaltsverzeichnis Vorwort Vorteile der Axios-Kap...
Dynamische SQL-Anweisungsanalyse in Mybatis
Dieser Artikel stellt hauptsächlich die dynamisch...
HTML-Code für Multiheader-Tabellen
1. Code der Multiheader-Tabelle Code kopieren Der ...
Detaillierte Einführung in den Nobody-Benutzer und Nologin im Unix/Linux-System
Was ist der Nobody-Benutzer in Unix/Linux-Systeme...
40 Schriftarten, empfohlen für berühmte Website-Logos
Wissen Sie, welche Schriftarten in den Logo-Desig...
So erstellen Sie einen Tabellenindex in MySQL
Inhaltsverzeichnis Unterstützt mehrere Filterarte...
So verwenden Sie Zeit als Beurteilungsbedingung in MySQL
Hintergrund: Während des Entwicklungsprozesses mü...
Eine kurze Erläuterung der Situationen in MySQL, die zu Indexfehlern führen
Hier einige Tipps von Ausbildungsstätten und mein...
Tipps zur Optimierung von CSS-Schattenanimationen
Diese Technik stammt aus diesem Artikel - So anim...
Implementierung eines dynamischen Partikel-Hintergrund-Plugins für die Vue-Anmeldeseite
Inhaltsverzeichnis Die dynamischen Partikeleffekt...