ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML ページ間でパラメータを渡すフロントエンド メソッド_html/css_WEB-ITnose
HTML ページ間でパラメータを渡すフロントエンド メソッド_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:23:111149ブラウズ
案件一覧などの一覧があり、その中の項目をクリックすると詳細ページに飛ぶという状況がプロジェクトでよく起こります。ケースと特定の詳細ページは後でユーザーによって追加されるため、詳細はクリックされたレコードに基づいて生成されます。書き始めるとすべてを網羅することは不可能です。したがって、ページにジャンプするときは、パラメーターを渡す必要があります。これにより、このパラメーターを通じてデータ要求を作成し、バックグラウンドから返されたデータに基づいてページを生成できるようになります。したがって、a タグを介してジャンプすることは間違いなく機能しません。
フォームを作成する場合は、フォームを使用して非表示にすることでパラメータを渡すことができます。
さらに、window.location.href と window.open も効果を実現できます。
1. フォームにパラメータを渡します
<html lang="en"> <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 class = "more" src = "main_jpg10.png" /> <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 class = "more" src = "main_jpg10.png" /> <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 class = "more" src = "main_jpg10.png" /> <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> 画像をクリックすると、receive.html ページにジャンプします。ページの URL は次のようになります。
渡したい文字列が渡されました。
次に、現在の URL で文字列分割を実行します
window.location.href.split("=")[1]//レモンを取得します
渡す必要があるパラメータを取得したら、次の内容に基づいて次のステップに進むことができますこれで対処しました。
URL によって渡されるパラメータを取得するための上記の文字列分割に加えて、通常のマッチングや window.location.search メソッドを通じて取得することもできます。
2. window.location.href を介して
たとえば、リストをクリックすると、detail.html ページに文字列を渡す必要があり、detail.html ページは、それに基づいてページのコンテンツを読み込みます。 ajax を介して渡された値とインタラクティブなデータ。
varindex = "レモン"; var url = "receive.html?index="+index; $("#more").click(function(){ window.location.href = url; });は、receive.html のページに置き換えられ、ページの URL は次のようになります。
次に、上記のメソッドを使用して必要なパラメータを抽出します
開きたい場合新しいページ、現在のページを変更する代わりに、window.location.href は適用できません。現時点では、それを実現するために window.location.open() を使用する必要があります
window.open() の簡単な紹介。関数 window.open( ) には 3 つのパラメータがあります。最初のパラメータは、開くページの URL です。2 番目のパラメータは、特定の文字列と、新しいページが現在のページを置き換えるかどうかを示すブール値です。ブラウザ履歴の値にロードされたページを指定する場合、最初のパラメータのみを渡す必要があります。 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 つの可能性があります。1 つは、ブラウザの組み込みブロック プログラムがポップアップ ウィンドウをブロックするため、この時点で window.open() が Null を返す可能性があることです。戻り値を監視することでブロックされました。
var newWin = window.open(url);if(newWin == null){ alert("弹窗被阻止");} もう 1 つは、ブラウザ拡張機能または他のプログラムによってブロックされたポップアップ ウィンドウであり、通常、window.open() はエラーをスローします。 したがって、ポップアップ ウィンドウがブロックされているかどうかを正確に検出するには、戻り値を検出する必要があります。 value 同時に、window.open() を try-catch ブロック内にカプセル化します。上記の例では、次の形式で記述できます。