jQueryの例でハッシュURLを使用します-jsチュートリアル-php.cn

jQueryの例でハッシュURLを使用します

Christopher Nolan

リリース： 2025-02-24 11:09:14

オリジナル

363 人が閲覧しました

Using Hash Urls with jQuery Example

jQueryの例でハッシュURLを使用します

最近の多くの最新のWebアプリはハッシュURLを使用していますページに一意性（ページタグ、セクション、アクションなど）を更新せずにページに追加するには、それを識別できます。これは、jQueryを使用してURLパラメーターを取得して、動的データをPageに渡すURLを介して渡すことから続いています。 wwwでまだ広く使用されています。

window.location.hash vs document.url

ハッシュタグをつかむために使用できる正規表現である両方と下を簡単に見てみましょう。

<span>//using window.location.hash
</span>$<span>.fn.urlHash = function()
</span><span>{
</span>  <span>return window.location.hash.replace('#','');
</span><span>};
</span>$<span>.urlHash();</span>

ログイン後にコピー

重要：location.hashはIE（IE9を含む）にとって安全ではありません。また、ページにIFRAMEが含まれている場合、IFrame内で手動で更新した後、コンテンツは古い場所を取得します。ハッシュ値（最初のページのロードの場合）は、手動検索値がlocation.hashとは異なります。

<span>//IE Proof - URL Hash Grab - returns complete hash value
</span>$<span>.fn.urlHash = function()
</span><span>{
</span>  <span>return document.URL.substr(document.URL.indexOf('#')+1);
</span><span>};
</span>$<span>.urlHash();</span>

ログイン後にコピー

したがって、Dayofeek Hashタグ値を抽出する例として、次のように行うでしょう。

<span>//in context - extract dayofweek hash
</span><span>//eg  url#dayofweek1 would return 1
</span><span>if (document.URL.indexOf('#dayofweek'))
</span><span>{
</span>    week <span>= parseInt(document.URL.substr(document.URL.indexOf('#')+1).replace('dayofweek',''))-1;
</span>    $resParent<span>.eq(week).showResources();
</span><span>}</span>

ログイン後にコピー

別のまともな方法

これは、より重いregexを使用するもう1つのまともな方法です（.match（）はnullを返すことはないため、ポンドの標識はオプションです）。

<span>var match = location.hash.match(<span>/<span>^#?(.*)$</span>/</span>)[1];
</span><span>if (match)
</span><span>{
</span>   <span>//do stuff...
</span><span>}</span>

ログイン後にコピー

失敗…

<span>var hash = location.hash.match(<span>/#<span>(w+)</span>/</span>)[1];</span>

ログイン後にコピー

問題：ハッシュに非ラチンまたは非アルファン次元の特性がある場合、誤った結果を返します。たとえば、ハッシュ＃foo@o＃bar $％huh hello、「foo」だけが返されます。 .match（）がnullを返すため、location.hashが空のときにtypeRrorを投げます

<span>var hash = location.hash.split('#')[1];</span>

ログイン後にコピー

同じテストハッシュを使用すると、少なくとも「Foo@O」の部分を取得します。つまり、ハッシュにポンドサインが含まれている場合にのみ失敗します。ハッシュがない場合、空の文字列の代わりに未定義に戻りますが、エラーが発生しません。

参照資料

ハッシュを取得します - 防弾の方法ハッシュURLに関するよくある質問（FAQ）

ハッシュURLとは何ですか？それが重要なのはなぜですか？

ハッシュURLは、識別子がそれに続くハッシュ（＃）シンボルを含むURLです。この識別子は、Webページ内の特定のセクションを指すために使用されます。ハッシュURLは、ページ全体をスクロールすることなく、ユーザーがページ上の特定のコンテンツに直接ナビゲートできるようにするため重要です。これは、複数のセクションを持つ長いWebページに特に役立ちます。さらに、ハッシュURLを使用して、ハッシュが現在のビューを反映するためにハッシュが変更する単一ページのWebアプリケーションで状態を維持できます。 URLは非常に簡単です。必要なのは、Append A Hash（＃）シンボルに続いてURLの識別子が続くことだけです。たとえば、www.example.comにページがあり、「section1」と呼ばれるセクションを指すハッシュURLを作成する場合、ハッシュURLはwww.example.com＃section1。

jqueryを使用してハッシュURLを操作するにはどうすればよいですか？

jQueryは、ハッシュURLを操作するためのいくつかの方法を提供します。「場所」オブジェクトの「ハッシュ」プロパティを使用して、URLのハッシュ部分を取得または設定できます。たとえば、ハッシュを「section1」に設定するには、location.hash = 'section1';を使用します。現在のハッシュを取得するには、Var Hash = location.hash;。ハッシュを変更することにより、ページを更新せずに異なるコンテンツをロードできます。これは、スムーズなユーザーエクスペリエンスを作成するためにシングルページアプリケーションでよく使用されます。変更。このイベントを使用して、ハッシュが変更されるたびにコードを実行できます。たとえば、$（window）.on（ 'hashchange'、function（）{ / *ここにコード * /}）;。ハッシュURLは非常に便利ですが、いくつかの欠点があります。 1つの主な欠点は、検索エンジンがハッシュに関連するコンテンツにインデックスを付けない可能性があるため、検索エンジン最適化（SEO）に問題を引き起こす可能性があることです。さらに、ハッシュURLは、個別のページビューとして常に追跡されるとは限らないため、分析に問題を引き起こす可能性があります。アンカータグを作成して、ユーザーがページの特定のセクションに直接ナビゲートできる「ジャンプリンク」を作成します。 URLのハッシュは、アンカータグの「ID」属性に対応しています。「場所」オブジェクトの「ハッシュ」プロパティを空の文字列に設定します。たとえば、location.hash = '';。