ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLページ間でパラメータを渡すフロントエンドメソッドの詳細な説明
HTMLページ間でパラメータを渡すフロントエンドメソッドの詳細な説明
- 无忌哥哥オリジナル
- 2018-07-12 09:07:132592ブラウズ
案件一覧などの一覧があり、その中の項目をクリックすると詳細ページに飛ぶという状況がプロジェクトでよく起こります。ケースと特定の詳細ページは後でユーザーによって追加されるため、詳細はクリックされたレコードに基づいて生成されます。書き始めるとすべてを網羅することは不可能です。したがって、ページにジャンプするときは、パラメーターを渡す必要があります。これにより、このパラメーターを通じてデータ要求を作成し、バックグラウンドから返されたデータに基づいてページを生成できるようになります。したがって、a タグを介してジャンプすることは間違いなく機能しません。
フォームを送信するときに、フォームを使用して非表示にすると、効果が得られます。
さらに、window.location.href と window.open も効果を実現できます。
1. フォームにパラメータを渡します
<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="HTMLページ間でパラメータを渡すフロントエンドメソッドの詳細な説明" >
<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="HTMLページ間でパラメータを渡すフロントエンドメソッドの詳細な説明" >
<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="HTMLページ間でパラメータを渡すフロントエンドメソッドの詳細な説明" >
<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 を介して渡された値とインタラクティブなデータ。
var index = "lemon"; var url = "receive.html?index="+index; $("#more").click(function(){ window.location.href = url; });
現在のページはrecieve.htmlページに置き換えられ、ページのURLは次のようになります:
次に、上記のメソッドを使用して必要なパラメータを抽出します
3. ウィンドウを通して。 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 と同じ効果を実現します。 .
上記の例の続き:
<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 ブロック内にカプセル化します。上記の例では、次の形式で記述できます。
以上がHTMLページ間でパラメータを渡すフロントエンドメソッドの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。