HTMLページ間でパラメータを渡すフロントエンド方式の詳細な説明

プロジェクトでよくある状況として、案件リストなどのリストが存在することがあります。リスト内の項目をクリックすると詳細ページに移動します。詳細はクリックされたレコードに基づいて生成されます。ケースと特定の詳細ページは後からユーザーによって追加されるため、書き始めるときに網羅的に記述することは不可能です。したがって、ページにジャンプするときには、パラメータを渡して、このパラメータを通じてデータ要求を行い、バックグラウンドから返されたデータに従ってページを生成する必要があります。したがって、a ラベルを飛び越えることは絶対に機能しません。
フォームを書くことはよくあります。送信時にパラメータを渡すことができます。フォームを使用して非表示にすると、効果が得られるはずです。

さらに、window.location.href と window.open でも同じ効果が得られます。

1. フォームを通じてパラメータを渡す

<html lang="ja">
    <ヘッド>
    <!--Web サイトのエンコード形式、UTF-8 国際エンコード、GBK または gb2312 中国語エンコード -->
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="キーワード" content="キーワード 1、キーワード 2">
        <meta name="説明" content="ウェブサイトの説明">
        <meta name="著者" content="イヴェット・ラウ">
        <title>ドキュメント</title>
        <!--css js ファイルの紹介-->
        <!-- <link rel="ショートカットアイコン" href="images/favicon.ico"> -->
        <link rel="スタイルシート" href=""/>
        <スクリプト タイプ = "text/javascript" src = "jquery-1.11.2.min.js"></スクリプト> 
    </head>
    <本文>      
        <フォーム名 = "frm" メソッド = "get" アクション = "receive.html" onsubmit = "return foo()" スタイル = "position:relative;">
            <input type="hidden" name="hid" value = "" index = "lemon"> 
            <img クラス = "more" src = "main_jpg10.png" />
            <input type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/>
        </フォーム>     
        <フォーム名 = "frm" メソッド = "get" アクション = "receive.html" onsubmit = "return foo()" スタイル = "position:relative;">
            <input type="hidden" name="hid" value = "" index = "aaa"> 
            <img クラス = "more" src = "main_jpg10.png" />
            <input type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/>
        </フォーム>
        <フォーム名 = "frm" メソッド = "get" アクション = "receive.html" onsubmit = "return foo()" スタイル = "position:relative;">
            <input type="hidden" name="hid" value = "" index = "bbb"> 
            <img クラス = "more" src = "main_jpg10.png" />
            <input type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/>
        </フォーム>
    </本文>
</html>
<スクリプト>
    関数foo(){
        var frm = window.event.srcElement;
        frm.hid.value = $(frm.hid).attr("インデックス"); 
        true を返します。
    }
</スクリプト>

画像をクリックすると、receive.html ページにリダイレクトされます。ページの URL は次のようになります。

渡したい文字列が渡されました。

次に現在のURLを文字列に分割します

window.location.href.split("=")[1]//レモンを入手

渡す必要のあるパラメータを取得したら、これに基づいて次のステップに進むことができます。

文字列分割を通じて URL によって渡されたパラメータを取得する上記の方法に加えて、通常のマッチングと window.location.search メソッドを通じてパラメータを取得することもできます。

2. window.location.href 経由

たとえば、リストをクリックするとき、detail.html ページに文字列を渡す必要があります。すると、detail.html ページは渡された値に基づいて、Ajax インタラクションデータを通じてページのコンテンツを読み込みます。

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

現在のページは recieve.html ページに置き換えられ、ページの URL は次のようになります。

次に、上記の方法を使用して必要なパラメータを抽出します。

3. window.location.open から

現在のページを変更するのではなく、新しいページを開きたい場合は、window.location.hrefは適用されません。この場合は、window.location.open()を使用して次の操作を実行する必要があります。

window.open() 関数について簡単に紹介します。window.open() には 3 つのパラメータがあります。最初のパラメータは開くページの URL、2 番目のパラメータはウィンドウのターゲット、3 番目のパラメータは特定の文字列と、新しいページがブラウザ履歴内の現在読み込まれているページを置き換えるかどうかを示すブール値です。渡す必要があるのは最初のパラメータだけです。 2 番目のパラメータには、「_blank」、「_self」、「_parent」、「_top」などの特殊なウィンドウ名を指定することもできます。「_blank」は新しいウィンドウを開き、「_self」は window.location.href と同じ効果を実現します。

上記の例を続けます:

<スクリプト>
    var index = "レモン";
    var url = "receive.html?index="+index;
    $("#more").click(function(){
        ウィンドウを開く(url)
    });
</スクリプト>

こうすると、クリックすると新しいページが開き、そのページの URL アドレスは上記と同じになります。

ブラウザのセキュリティ制限により、一部のブラウザではポップアップウィンドウの設定に制限が加えられています。ほとんどのブラウザにはポップアップウィンドウブロッカーが組み込まれています。そのため、ポップアップウィンドウがブロックされる可能性があります。ポップアップウィンドウがブロックされる場合は、2 つの可能性を考慮する必要があります。1 つは、ブラウザの組み込みブロッカーがポップアップウィンドウをブロックしていることです。この場合、window.open() は Null を返す可能性があります。このとき、ポップアップウィンドウがブロックされているかどうかを判断するには、返された値を監視するだけで済みます。

var newWin = window.open(url);
if(newWin == null){
    alert("ポップアップがブロックされました");
}

もう 1 つは、ブラウザ拡張機能やその他のプログラムによってポップアップウィンドウがブロックされている場合です。この場合、window.open() は通常エラーをスローします。そのため、ポップアップウィンドウがブロックされているかどうかを正確に検出するには、戻り値を検出しながら、window.open() を try-catch ブロックにカプセル化する必要があります。上記の例は、次のように記述できます。

<スクリプト>
    var ブロック = false;
    試す{
        var index = "レモン";
        var url = "receive.html?index="+index;
        $("#more").click(function(){
           var newWin = window.open(url);
           if(newWin == null){
               ブロック = true;
           }
        });
    } キャッチ(例){
        ブロック = true;
    }
    if(ブロック){
        alert("ポップアップウィンドウがブロックされました");
    }    
</スクリプト>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: DockerにMinIOをインストールするための詳細な手順

>>: モバイルデバイスにおける適応レイアウトの問題に関する簡単な説明 (レスポンシブ、rem/em、Js ダイナミクス)