HTML ページ間でパラメータを渡すフロントエンドメソッド_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML ページ間でパラメータを渡すフロントエンドメソッド_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:23 AM

案件一覧などの一覧があり、その中の項目をクリックすると詳細ページに飛ぶという状況がプロジェクトでよく起こります。ケースと特定の詳細ページは後でユーザーによって追加されるため、詳細はクリックされたレコードに基づいて生成されます。書き始めるとすべてを網羅することは不可能です。したがって、ページにジャンプするときは、パラメーターを渡す必要があります。これにより、このパラメーターを通じてデータ要求を作成し、バックグラウンドから返されたデータに基づいてページを生成できるようになります。したがって、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" / alt="HTML ページ間でパラメータを渡すフロントエンド メソッド_html/css_WEB-ITnose" >            <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" / alt="HTML ページ間でパラメータを渡すフロントエンド メソッド_html/css_WEB-ITnose" >            <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" / alt="HTML ページ間でパラメータを渡すフロントエンド メソッド_html/css_WEB-ITnose" >            <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 は次のようになります。

次に、上記のメソッドを使用して必要なパラメータを抽出します

3. window.location.open を通して

開きたい場合新しいページ、現在のページを変更する代わりに、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 ブロック内にカプセル化します。上記の例では、次の形式で記述できます。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Web開発にとってHTMLタグが重要なのはなぜですか？May 02, 2025 am 12:03 AM

htmltagsareSterenceforwebdevelovementasyStheStructureanhandhancewebpages.1）theydefineLayout、semantics、and-interactivity.2）semanticagsimprovecessibility.3）opeusofusofagscanoptimizeperformanceandensurecross-brows-compativeation。

HTMLタグと属性に一貫したコーディングスタイルを使用することの重要性を説明します。May 01, 2025 am 12:01 AM

コードの読みやすさ、保守性、効率を向上させるため、一貫したHTMLエンコーディングスタイルは重要です。 1）低ケースタグと属性を使用します。2）一貫したインデントを保持し、3）シングルまたはダブルの引用符を選択して固執する、4）プロジェクトのさまざまなスタイルの混合を避け、5）きれいなスタイルやEslintなどの自動化ツールを使用して、スタイルの一貫性を確保します。

ブートストラップ4にマルチプロジェクトカルーセルを実装する方法は？Apr 30, 2025 pm 03:24 PM

Bootstrap4にマルチプロジェクトカルーセルを実装するソリューションBootstrap4にマルチプロジェクトカルーセルを実装するのは簡単な作業ではありません。ブートストラップですが...

DeepSeekの公式Webサイトは、マウススクロールイベントの浸透の影響をどのように達成していますか？Apr 30, 2025 pm 03:21 PM

マウススクロールイベントの浸透の効果を実現する方法は？ Webを閲覧すると、いくつかの特別なインタラクションデザインに遭遇することがよくあります。たとえば、DeepSeekの公式ウェブサイトでは、...

HTMLビデオの再生コントロールスタイルを変更する方法Apr 30, 2025 pm 03:18 PM

HTMLビデオのデフォルトの再生コントロールスタイルは、CSSを介して直接変更することはできません。 1. JavaScriptを使用してカスタムコントロールを作成します。 2。CSSを介してこれらのコントロールを美化します。 3. video.jsやPLYRなどのライブラリを使用すると、互換性、ユーザーエクスペリエンス、パフォーマンスを検討してください。プロセスを簡素化できます。