Detaillierte Erläuterung der Front-End-Methode zum Übergeben von Parametern zwischen HTML-Seiten

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.
Wir schreiben häufig Formulare. Beim Absenden können wir Parameter übergeben. Wenn wir das Formular verwenden und es ausblenden, sollte der Effekt erzielt werden.

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 Zitrone

Nachdem 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

>>:  Eine kurze Diskussion über adaptive Layoutprobleme auf Mobilgeräten (responsive, rem/em, Js-Dynamik)

Artikel empfehlen

So erhalten Sie den tatsächlichen Pfad des aktuellen Skripts in Linux

1. Holen Sie sich den tatsächlichen Pfad des aktu...

So implementieren Sie das Singleton-Muster in Javascript

Inhaltsverzeichnis Überblick Code-Implementierung...

js implementiert ein einfaches Englisch-Chinesisch-Wörterbuch

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

Lösen Sie das Problem des schwarzen Bildschirms, nachdem VMware das Linux-System installiert und gestartet hat

1. Installationsumgebung 1. HUAWEI Mate X CPU i5 ...

Analyse des rel-Attributs in HTML

.y { background: url(//img.jbzj.com/images/o_y.pn...

Installation und Verwendung von Vue

Inhaltsverzeichnis 1. Vue-Installation Methode 1:...

Der umfassendste und detaillierteste Prozess zur Installation von Deepin20 auf einer virtuellen VMware-Maschine

Software für virtuelle Maschinen: VMware Workstat...

Tutorial zur HTML-Tabellenauszeichnung (28): Farbattribut für Zellrahmen BORDERCOLOR

Um die Tabelle zu verschönern, können Sie für die...

Detaillierte Erklärung des Unterschieds zwischen in und exists in MySQL

1. Bereiten Sie sich im Voraus vor Zu Ihrer Beque...

JavaScript Factory Pattern erklärt

Inhaltsverzeichnis Einfache Fabrik Fabrikmethode ...

Tiefgreifendes Verständnis der Verwendung von r2dbc in MySQL

Einführung MySQL sollte eine sehr häufig verwende...

10 Minuten, um das Single-Page-Anwendungsrouting des WeChat-Applets gründlich zu verstehen

Merkmale einer Single-Page-Anwendung „Annahme:“ A...

Nach der Installation von Navicat in MySQL wird 2059 angezeigt: Authentifizierungs-Plugin und Docker für lokale virtuelle Maschinen sowie Remote-Link-Server

Vorwort Nach der Installation von MySQL und Navic...

Tools zur Bildoptimierung für Webseiten und Tipps zur Verwendung

Als grundlegendes Element einer Webseite sind Bil...

So legen Sie eine horizontale Navigationsstruktur in HTML fest

In diesem Artikel werden Ihnen zwei Methoden zum ...