プロジェクトでよくあるのが、案件一覧などの一覧があり、その中の項目をクリックすると詳細ページに飛ぶという状況です。ケースと特定の詳細ページは後でユーザーによって追加されるため、詳細はクリックされたレコードに基づいて生成されます。書き始めるとすべてを網羅することは不可能です。したがって、ページにジャンプするときは、パラメーターを渡す必要があります。これにより、このパラメーターを通じてデータ要求を作成し、バックグラウンドから返されたデータに基づいてページを生成できるようになります。したがって、a タグを介してジャンプすることは間違いなく機能しません。
フォームを作成するときに、フォームを使用して非表示にすると、その効果が得られます。
さらに、window.location.href と window.open も効果を実現できます。
1. フォームを通じてパラメータを渡す <html lang=en> <head> <!--Web サイトのエンコード形式、UTF-8 国際エンコード、GBK または gb2312 中国語エンコード--> <meta http-equiv=content-type content=text/html;charset=utf- 8 /> <meta name=キーワード content=キーワード 1、キーワード 2> <meta name=説明 content=Web サイトの説明コンテンツ> <meta name=著者 content=イベット・ラウ> <title>ドキュメント</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 = accept.html onsubmit = return foo() style =position:relative;> <input type=hidden name=hid value =index =レモン> <img class = more src = main_jpg10.png /> <input type = submit style =position:absolute;左:10px;上:0px;幅:120px;高さ:40px;不透明度:0;カーソル:ポインタ;/> </form> <フォーム名 = frm メソッド = get action = accept.html onsubmit = return foo() style = Position:relative;> <input type=hidden name=hid value =index = aaa> <img class = more src = main_jpg10.png /> <入力タイプ = 送信スタイル = Position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;/> </form> <form name = frm method = get action = accept.html onsubmit = return foo() スタイル = 位置:相対;> <入力タイプ=隠し名=隠し値 = インデックス = bbb> <img クラス = 詳細 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> 関数 foo(){ var frm = window.event.srcElement; $(frm.hid).attr(index); }</script>画像をクリックするとreceive.htmlのページにジャンプします。ページの URL は次のようになります。
渡したい文字列が渡されました。
次に、現在の URL に対して文字列分割を実行します。
window.location.href.split(=)[1]//レモンを取得
渡す必要があるパラメータを取得したら、これに基づいて次のステップに進むことができます。
URL によって渡されるパラメータを取得するための上記の文字列分割に加えて、通常のマッチングや window.location.search メソッドを通じてパラメータを取得することもできます。
2. window.location.href 経由たとえば、リストをクリックすると、detail.html ページに文字列を渡す必要があります。その後、detail.html ページは、渡された値に基づいて、Ajax インタラクション データを通じてページのコンテンツを読み込みます。
var インデックス = レモン; var url = accept.html?index=+index; $(#more).click(function(){ window.location.href = url; });現在のページはrecieve.htmlページに置き換えられ、ページのURLは次のようになります。
次に、上記のメソッドを使用して必要なパラメータを抽出します
3. 窓から場所を開く現在のページを変更するのではなく、新しいページを開きたい場合、window.location.href は適用できません。これを実現するには、window.location.open() を使用する必要があります。
window.open() 関数について簡単に説明します。 window.open() には 3 つのパラメータがあり、最初のパラメータは開くページの URL で、3 番目のパラメータは特定の文字列です。新しいページがブラウザーの履歴に現在ロードされているページを置き換えるかどうかを示すブール値。最初のパラメーターのみを渡す必要があります。 2 番目のパラメータには、_blank、_self、_parent、_top などの特別なウィンドウ名を指定することもできます。_blank は新しいウィンドウを開き、_self は window.location.href と同じ効果を実現します。
上記の例を続けます。
<script> var インデックス = レモン var url = accept.html?index=+index; $(#more).click(function(){ window.open(url) }); </script>このようにして、クリックすると、上記と同じ URL アドレスで新しいページが開きます。
ブラウザのセキュリティ制限により、一部のブラウザにはポップアップ ウィンドウをブロックするプログラムが組み込まれているため、ポップアップ ウィンドウがブロックされる場合があります。考慮する必要があるのは、ブラウザの組み込みブロック プログラムがポップアップ ウィンドウをブロックしているため、この時点で window.open() が Null を返す可能性があることです。戻り値を監視することによって。
var newWin = window.open(url);if(newWin == null){ アラート(ポップアップがブロックされました);}もう 1 つは、ブラウザ拡張機能または他のプログラムによってブロックされたポップアップ ウィンドウです。この場合、window.open() は通常エラーをスローします。そのため、ポップアップ ウィンドウがブロックされているかどうかを正確に検出するには、戻り値と at を検出する必要があります。同時に、window.open() は try-catch ブロックにカプセル化されます。上記の例では、次のように記述できます。
<スクリプト> var ブロック = false; var インデックス = レモン; var url = accept.html?index=+index; $(#more).click(function(){ var newWin = window.open(url); (newWin == null){ブロック = true; } catch(ex){ブロック = true; } if(ブロックされました){アラート(ポップアップ ウィンドウがブロックされました);以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。