BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

htmlページ間でパラメータを受け渡しするフロントエンド方式を解説

2022-01-08 14:41:07

プロジェクトの中で、例えば案件のリストがあり、その中の項目をクリックすると詳細ページに飛ぶという状況がよくあります。詳細ページは、クリックされた特定のレコードに基づいて生成されます。症例や特定の詳細ページは、ユーザーが後から追加するものであり、書き始めた時点では網羅することは不可能だからです。そのため、ページをジャンプする際にはパラメータを渡す必要があり、このパラメータを通じてデータリクエストを行い、バックエンドから返されたデータに基づいてページを生成することができます。だから、タグによるジャンプは絶対にうまくいきません。
投稿時に、パラメータを渡すことができるフォームをよく書きますが、そのフォームを利用して非表示にすれば、効果を発揮するはずです。

このほかにも、window.location.hrefやwindow.openでも効果があります。

1. フォームからパラメータを渡す 

<html lang="en">
    <head>
    <! --Website encoding format, UTF-8 international encoding, GBK or gb2312 Chinese encoding -->
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="Keywords" content="Keyword I, Keyword II">
        <meta name="Description" content="Website description content">
        <meta name="Author" content="Yvette Lau">
        <title>Document</title>
        <! --css js file introduction -->
        <! -- <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 class = "more" src = "main_jpg10.png" />
            <input type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;& quot;/>
        </form>     
        <form name = "frm" method = "get" action = "receive.html" onsubmit = "return foo()" style = " position:relative;">
            <input type="hidden" name="hid" value = "" index = "aaa"> 
            <img class = "more" src = "main_jpg10.png" />
            <input type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;& quot;/>
        </form>
        <form name = "frm" method = "get" action = "receive.html" onsubmit = "return foo()" style = " position:relative;">
            <input type="hidden" name="hid" value = "" index = "bbb"> 
            <img class = "more" src = "main_jpg10.png" />
            <input type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;& quot;/>
        </form>
    </body>
</html>
<script>
    function foo(){
        var frm = window.event.srcElement;
        frm.hid.value = $(frm.hid).attr("index"); 
        return true;
    }
</script>

画像をクリックすると、receive.htmlのページにジャンプします。ページのURLはこうなります。

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

次に、現在のurlが文字列に分割されます 

window.location.href.split("=")[1] // get lemon

渡すべきパラメータを取得したら、それに基づいて次のステップに進みます。

上記のように文字列分割によって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()に依存する必要があります。

第一引数は開くべきページのurl、第二引数はウィンドウターゲット、第三引数は特定の文字列と、第一引数のみを渡して新しいページがブラウザの履歴で現在読み込まれているページを置き換えるかどうかを示すブール値です。第2引数には、"_blank", "_self", "_parent", "_top ", "_blank" は新しいウィンドウを開き、 "_self" は window.location.href と同じ効果を実現することも可能です。

上記の例の続きです。 

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

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

ブラウザのセキュリティ上の制約から、一部のブラウザではポップアップの設定に制約が加えられています。ほとんどのブラウザはポップアップブロック機能を内蔵しており、ポップアップがブロックされる可能性があります。ポップアップがブロックされる場合、2つの可能性を考えることができます。ひとつは、ブラウザに組み込まれたブロッカーがポップアップを阻止した場合、window.open()がNullを返す可能性が高いことです。この場合、ポップアップがブロックされているかどうかを判断するために、この戻り値を監視するだけです。 

var newWin = window.open(url);
if(newWin == null){
    alert("Popup blocked");
}

もうひとつのタイプのポップアップは、ブラウザの拡張機能や他のプログラムによってブロックされているもので、その場合は通常 window.open() はエラーを投げます。したがって、ポップアップがブロックされているかどうかをできるだけ正確に検出するには、window.open() を try-catch ブロックでラップしながら戻り値を検出しなければならず、上記の例では以下のような形式で記述されます。 

<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){
        blocked = true;
    }
    if(blocked){
        alert("Popup blocked");
    }    
</script>

以上、本記事の全内容をご紹介しましたが、皆様の学習のお役に立てれば幸いです。また、Script Houseをより一層応援していただければ幸いです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します