Detaillierte Erläuterung der Front-End-Methode zum Übergeben von Parametern zwischen HTML-Seiten
|
In Projekten kommt es häufig vor, dass eine Liste vorliegt, z. B. eine Fallliste. Klicken Sie auf ein Element in der Liste, um zur Detailseite zu springen. Die Details werden basierend auf dem angeklickten Datensatz generiert. Da Fälle und spezifische Detailseiten später von Benutzern hinzugefügt werden, ist es uns unmöglich, beim Schreiben erschöpfend zu sein. Daher müssen wir beim Springen zur Seite einen Parameter übergeben, damit wir über diesen Parameter eine Datenanforderung stellen und dann die Seite entsprechend den vom Hintergrund zurückgegebenen Daten generieren können. Deshalb wird ein Sprung über die Beschriftung A definitiv nicht funktionieren. Darüber hinaus können window.location.href und window.open denselben Effekt erzielen. 1. Parameter über das Formular übergeben
<html lang="de">
<Kopf>
<!--Website-Kodierungsformat, internationale UTF-8-Kodierung, chinesische GBK- oder gb2312-Kodierung-->
<meta http-equiv="Inhaltstyp" Inhalt="text/html;charset=utf-8" />
<meta name="Schlüsselwörter" content="Schlüsselwort 1, Schlüsselwort 2">
<meta name="Beschreibung" content="Website-Beschreibung">
<meta name="Autor" content="Yvette Lau">
<title>Dokument</title>
<!--Einführung in CSS-JS-Dateien-->
<!-- <link rel="Verknüpfungssymbol" href="images/favicon.ico"> -->
<link rel="stylesheet" href=""/>
<Skripttyp = "Text/Javascript" src = "jquery-1.11.2.min.js"></Skript>
</Kopf>
<Text>
<Formularname = "frm" Methode = "abrufen" Aktion = "empfangen.html" bei Übermittlung = "Rückgabe foo()" Stil = "Position:relativ;">
<Eingabetyp="versteckt" Name="versteckt" Wert = "" Index = "Zitrone">
<img Klasse = "mehr" src = "main_jpg10.png" />
<Eingabetyp = "Senden" Stil = "Position:absolut;links:10px;oben:0px;Breite:120px;Höhe:40px;Deckkraft:0;Cursor:Zeiger;"/>
</form>
<Formularname = "frm" Methode = "abrufen" Aktion = "empfangen.html" bei Übermittlung = "Rückgabe foo()" Stil = "Position:relativ;">
<Eingabetyp="versteckt" Name="versteckt" Wert = "" Index = "aaa">
<img Klasse = "mehr" src = "main_jpg10.png" />
<Eingabetyp = "Senden" Stil = "Position:absolut;links:10px;oben:0px;Breite:120px;Höhe:40px;Deckkraft:0;Cursor:Zeiger;"/>
</form>
<Formularname = "frm" Methode = "abrufen" Aktion = "empfangen.html" bei Übermittlung = "Rückgabe foo()" Stil = "Position:relativ;">
<Eingabetyp="versteckt" Name="versteckt" Wert = "" Index = "bbb">
<img Klasse = "mehr" src = "main_jpg10.png" />
<Eingabetyp = "Senden" Stil = "Position:absolut;links:10px;oben:0px;Breite:120px;Höhe:40px;Deckkraft:0;Cursor:Zeiger;"/>
</form>
</body>
</html>
<Skript>
Funktion foo(){
var frm = window.event.srcElement;
frm.hid.value = $(frm.hid).attr("index");
gibt true zurück;
}
</Skript>Wenn Sie auf das Bild klicken, werden Sie auf die Seite „receive.html“ weitergeleitet. Die URL der Seite wird:
Die Zeichenfolge, die wir übergeben möchten, wurde übergeben. Dann teilen Sie die aktuelle URL in Zeichenfolgen auf
window.location.href.split("=")[1]//Holen Sie sich ZitroneNachdem wir die zu übergebenden Parameter erhalten haben, können wir auf dieser Grundlage mit dem nächsten Schritt fortfahren. Zusätzlich zur oben beschriebenen Methode zum Abrufen der von der URL übergebenen Parameter durch Zeichenfolgensegmentierung können wir sie auch durch reguläre Übereinstimmung und die Methode window.location.search abrufen. 2. Über window.location.href Wenn wir beispielsweise auf eine Liste klicken, müssen wir eine Zeichenfolge an die Seite detail.html übergeben. Anschließend lädt die Seite detail.html den Inhalt der Seite basierend auf dem übergebenen Wert über Ajax-Interaktionsdaten.
var index = "Zitrone"; var url = "receive.html?index="+index; $("#mehr").klicken(function(){ window.location.href = url; });Die aktuelle Seite wird durch die Seite recieve.html ersetzt und die URL der Seite lautet:
Dann verwenden wir die obige Methode, um die benötigten Parameter zu extrahieren 3. Durch window.location.open Wenn Sie eine neue Seite öffnen möchten, anstatt die aktuelle Seite zu ändern, ist window.location.href nicht anwendbar. Zu diesem Zeitpunkt müssen wir window.location.open() verwenden, um dies zu erreichen Lassen Sie uns kurz die Funktion window.open() vorstellen. Window.open() hat drei Parameter. Der erste Parameter ist die URL der zu öffnenden Seite, der zweite Parameter ist das Fensterziel und der dritte Parameter ist eine bestimmte Zeichenfolge und ein Boolescher Wert, der angibt, ob die neue Seite die aktuell geladene Seite im Browserverlauf ersetzt. Nur der erste Parameter muss übergeben werden. Der zweite Parameter kann auch ein spezieller Fenstername wie „_blank“, „_self“, „_parent“ oder „_top“ sein. „_blank“ öffnet ein neues Fenster, während „_self“ den gleichen Effekt wie window.location.href erzielt. Weiter mit dem obigen Beispiel:
<Skript>
var index = "Zitrone";
var url = "empfangen.html?index="+index;
$("#mehr").klick(function(){
Fenster.öffnen(URL)
});
</Skript>Wenn Sie auf diese Weise klicken, wird eine neue Seite geöffnet und die URL-Adresse der Seite ist dieselbe wie oben. Aufgrund von Sicherheitsbeschränkungen fügen einige Browser Einschränkungen für die Konfiguration von Popup-Fenstern hinzu. Die meisten Browser verfügen über integrierte Popup-Fensterblocker. Daher können Popup-Fenster blockiert werden. Wenn Popup-Fenster blockiert sind, müssen zwei Möglichkeiten in Betracht gezogen werden. Eine davon ist, dass der integrierte Blocker des Browsers Popup-Fenster blockiert. In diesem Fall gibt window.open() wahrscheinlich Null zurück. Zu diesem Zeitpunkt müssen Sie nur den zurückgegebenen Wert überwachen, um festzustellen, ob das Popup-Fenster blockiert ist.
var newWin = window.open(url);
wenn(neuerGewinn == null){
alert("Popup blockiert");
}Das andere ist ein Popup-Fenster, das durch eine Browsererweiterung oder ein anderes Programm blockiert wird. In diesem Fall wird window.open() normalerweise einen Fehler auslösen. Um daher genau zu erkennen, ob das Popup-Fenster blockiert ist, müssen Sie window.open() in einen Try-Catch-Block einkapseln, während Sie den Rückgabewert erkennen. Das obige Beispiel kann wie folgt geschrieben werden:
<Skript>
var blockiert = false;
versuchen{
var index = "Zitrone";
var url = "empfangen.html?index="+index;
$("#mehr").klick(function(){
var newWin = window.open(url);
wenn(neuerGewinn == null){
blockiert = wahr;
}
});
} Fang (Beispiel) {
Block = wahr;
}
wenn(blockiert){
alert("Popup-Fenster blockiert");
}
</Skript>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. |
<<: Detaillierte Schritte zur Installation von MinIO auf Docker
Artikel empfehlen
So konfigurieren Sie gängige Software unter Linux
Wenn Sie einen neuen Linux-Server bekommen, müsse...
Lösung für IDEA, das keine Verbindung zur MySQL-Portnummernbelegung herstellen kann
Ich kann mich über die Befehlszeile ganz normal b...
Vue Virtual DOM – Schnellstart
Inhaltsverzeichnis Virtueller DOM Was ist virtuel...
CSS verwendet das Autoflow-Attribut, um einen Sitzauswahleffekt zu erzielen
1. Autoflow-Attribut: Wenn die Länge und Breite d...
Lösung für das Problem, dass die Audiokomponente des WeChat-Applets unter iOS nicht abgespielt werden kann.
Lösung: Binden Sie das Klickereignis an die Audio...
Eine kurze Erläuterung der $notify-Punkte des Elements
Meine ursprüngliche Absicht war, die $notify-Bena...
Vier völlig unterschiedliche Erfahrungen im Interaktionsdesign der Apple Watch enthüllt
Heute geht es noch immer um das Design von Watch-...
Ein vorläufiges Verständnis der benutzerdefinierten CSS-Eigenschaften
Heute sind CSS-Präprozessoren der Standard für di...
Analyse von drei Parametern des MySQL-Replikationsproblems
Inhaltsverzeichnis 01 sql_slave_skip_counter-Para...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.12 (Windows 10)
Dieser Artikel zeichnet das Installations-Grafik-...
Beispiel für die Implementierung eines globalen Wasserzeichens in Vue
Inhaltsverzeichnis 1. Erstellen Sie eine Wasserze...
Linux implementiert den Quellcode des Zahlenratespiels
Ein einfacher Linux-Ratespiel-Quellcode Spielrege...
Beispielcode für ein großes Dropdown-Menü, implementiert in reinem CSS
Dies ist ein großes Dropdown-Menü, das rein in CS...
Implementierung der vertikalen Zentrierung mit unbekannter Höhe in CSS
Dieser Artikel stellt hauptsächlich die Implement...
Docker stellt eine MySQL-Remoteverbindung bereit, um 2003-Probleme zu lösen
Herstellen einer Verbindung mit MySQL Hier verwen...