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

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

无忌哥哥

Freigeben： 2018-07-12 09:07:13

Original

2529 Leute haben es durchsucht

In Projekten kommt es häufig vor, dass eine Liste vorhanden ist, beispielsweise eine Fallliste. Klicken Sie auf ein Element in der Liste, um zur Detailseite zu springen. Details werden auf der Grundlage eines angeklickten Datensatzes generiert. Da die Fälle und spezifischen Detailseiten später von Benutzern hinzugefügt werden, ist es unmöglich, sie alle zu erschöpfen, wenn wir mit dem Schreiben beginnen. Daher müssen wir beim Springen zur Seite einen Parameter übergeben, damit wir über diesen Parameter eine Datenanforderung stellen und dann die Seite basierend auf den vom Hintergrund zurückgegebenen Daten generieren können. Daher wird das Überspringen des a-Tags definitiv nicht funktionieren.
Wir schreiben oft Formulare und können Parameter übergeben, wenn wir sie ausblenden.

Darüber hinaus können auch window.location.href und window.open den Effekt erzielen.

1. Übergeben Sie Parameter über das Formular

<html>
    <head>
    <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="Keywords" content="关键词一，关键词二">
        <meta name="Description" content="网站描述内容">
        <meta name="Author" content="Yvette Lau">
        <title>Document</title>
        <!--css js 文件的引入-->
        <!-- <link rel="shortcut icon" href="images/favicon.ico">        -->
        <link rel="stylesheet" href=""/>
        <script type = "text/javascript" src = "jquery-1.11.2.min.js"></script> 
    </head>
    <body>      
        <form name = "frm" method = "get" action = "receive.html" onsubmit = "return foo()" style = "position:relative;">
            <input type="hidden"  name="hid" value = "" index = "lemon"> 
            <img  src = "main_jpg10.png" / alt="Detaillierte Erläuterung der Front-End-Methode zum Übergeben von Parametern zwischen HTML-Seiten" >
            <input type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/>
        </form>     
        <form name = "frm" method = "get" action = "receive.html" onsubmit = "return foo()" style = "position:relative;">
            <input type="hidden"  name="hid" value = "" index = "aaa"> 
            <img  src = "main_jpg10.png" / alt="Detaillierte Erläuterung der Front-End-Methode zum Übergeben von Parametern zwischen HTML-Seiten" >
            <input type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/>
        </form>
        <form name = "frm" method = "get" action = "receive.html" onsubmit = "return foo()" style = "position:relative;">
            <input type="hidden"  name="hid" value = "" index = "bbb"> 
            <img  src = "main_jpg10.png" / alt="Detaillierte Erläuterung der Front-End-Methode zum Übergeben von Parametern zwischen HTML-Seiten" >
            <input type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/>
        </form>
    </body>
</html>
<script>
    function foo(){
        var frm = window.event.srcElement;
        frm.hid.value = $(frm.hid).attr("index"); 
        return true;
    }
</script>

Nach dem Login kopieren

Wenn Sie auf das Bild klicken, springen Sie zur Seite „receive.html“. Die URL der Seite lautet:

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

Die Zeichenfolge, die wir übergeben möchten, wurde übergeben.

Führen Sie dann eine Zeichenfolgenaufteilung für die aktuelle URL durch

window.location.href.split(“=”)[1]//Zitrone abrufen

Nachdem wir die zu übergebenden Parameter erhalten haben, können wir auf dieser Grundlage mit dem nächsten Schritt fortfahren.

Zusätzlich zur oben erwähnten Zeichenfolgenaufteilung, um die von der URL übergebenen Parameter zu erhalten, können wir sie auch durch regulären Abgleich und die Methode window.location.search erhalten.

2. Übergeben Sie window.location.href

Wenn wir beispielsweise auf eine Liste klicken, müssen wir eine Zeichenfolge an die Seite detail.html und dann an die Seite detail.html übergeben übergibt interaktive Ajax-Daten und lädt den Inhalt der Seite.

var index = "lemon"; var url = "receive.html?index="+index; $("#more").click(function(){ window.location.href = url; });

Nach dem Login kopieren

Die aktuelle Seite wird durch die Seite recieve.html ersetzt und die URL der Seite lautet:

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

Dann Wir verwenden die obige Methode, um die Parameter zu extrahieren, die Sie benötigen

3. Über window.location.open

Wenn Sie eine neue Seite öffnen möchten, anstatt die aktuelle Seite zu ändern, dann window.location. href Nicht anwendbar. Zu diesem Zeitpunkt müssen wir window.location.open() verwenden, um

Eine kurze Einführung in die Funktion window.open() hat den ersten Der Parameter ist die URL der zu öffnenden Seite, der zweite Parameter ist das Fensterziel, der dritte Parameter ist eine bestimmte Zeichenfolge und ein boolescher Wert, der angibt, ob die neue Seite die aktuell geladene Seite im Browserverlauf ersetzt, indem nur die erste übergeben wird Parameter. Der zweite Parameter kann auch ein spezieller Fenstername sein, z. B. „_blank“, „_self“, „_parent“, „_top“. „_blank“ öffnet ein neues Fenster und „_self“ erzielt den gleichen Effekt wie window.location.href .

Fahren Sie mit dem obigen Beispiel fort:

<script>
    var index = "lemon";
    var url = "receive.html?index="+index;
    $("#more").click(function(){
        window.open(url)
    });
</script>

Nach dem Login kopieren

Auf diese Weise wird beim Klicken eine neue Seite geöffnet. Die URL-Adresse der Seite ist dieselbe wie oben.

Aufgrund von Browser-Sicherheitseinschränkungen verfügen einige Browser über integrierte Popup-Fenster-Blockierungsprogramme. Sie müssen zwei Möglichkeiten in Betracht ziehen. Eine besteht darin, dass das integrierte Blockierungsprogramm des Browsers Popup-Fenster blockiert, sodass window.open() wahrscheinlich Null zurückgibt. Zu diesem Zeitpunkt können Sie feststellen, ob das Popup-Fenster blockiert ist durch Überwachung des zurückgegebenen Werts.

var newWin = window.open(url);
if(newWin == null){
    alert("弹窗被阻止");
}

Nach dem Login kopieren

Das andere ist ein Popup-Fenster, das durch eine Browsererweiterung oder ein anderes Programm blockiert wird. Daher gibt window.open() normalerweise einen Fehler aus. Um genau zu erkennen, ob das Popup-Fenster blockiert ist, müssen Sie Beim Erkennen des Rückgabewerts muss window.open() in einem Try-Catch-Block gekapselt werden. Im obigen Beispiel kann es in der folgenden Form geschrieben werden:

<script>
    var blocked = false;
    try{
        var index = "lemon";
        var url = "receive.html?index="+index;
        $("#more").click(function(){
           var newWin = window.open(url);
           if(newWin == null){
               blocked = true;
           }
        });
    } catch(ex){
        block = true;
    }
    if(blocked){
        alert("弹出窗口被阻止");
    }   
</script>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Front-End-Methode zum Übergeben von Parametern zwischen HTML-Seiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!