ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript による URL の操作方法の詳細な説明 (シングルページ アプリケーションで一般的に使用される)

JavaScript による URL の操作方法の詳細な説明 (シングルページ アプリケーションで一般的に使用される)

黄舟
黄舟オリジナル
2017-02-27 14:33:101434ブラウズ

JavaScript が URL を操作する方法の詳細な説明 (シングルページ アプリケーションで一般的に使用されます)

JavaScript には、通常のページ ジャンプであっても、シングルページ アプリケーションのハッシュ値の変更であっても、ブラウザーの履歴を操作できるメソッドが多数あります。特に単一ページ アプリケーションでは、これらのメソッドを使用することが、ページ ルーティングのほぼ中心的な方法となります。この記事では、これらの方法について詳しく説明します。

1.document.location

location は最も便利な BOM オブジェクトの 1 つで、現在のウィンドウにロードされているドキュメントに関する情報を提供し、いくつかのナビゲーション機能も提供します。実際、場所オブジェクトは、ウィンドウ オブジェクトのプロパティとドキュメント オブジェクトのプロパティの両方です。つまり、window.location と document.location は同じオブジェクトです。非ブラウザーのドキュメント環境に適応するには、document.location を使用することをお勧めします。
a タグに設定された href 属性を除いて、最も一般的に使用されるジャンプ メソッドは次のとおりです: window.location.href="xxx"; 実際、上記のコードは実際に location.assign メソッドを実行します。つまり、次の 3 つの URL ジャンプの記述方法はまったく同じです。これらはすぐに新しい URL を開き、ブラウザーの履歴にレコードを生成します。

document.location.assign("xxx");document.location="xxx";document.location.href="xxx";

この方法でジャンプした場合、URL が現在の URL とまったく同じである場合、ページは更新されますが、ブラウザ履歴は追加されません。

2.location.replace

この関数は location.href="xxx"; とほぼ同じですが、唯一の違いは、location.replace はブラウザの履歴にレコードを生成し、Replace はブラウザの履歴にレコードを生成することです。前回の記録。たとえば、「a.html」ページを開くと、ページ内に次の 2 行のコードがあります: location.href=”xxx”;完全相同,只有一个区别,location.replace会在浏览器的历史记录中生成一条记录,并替换前一条记录。举个例子,当我们打开“a.html”页面,页面内有如下两行代码:

document.location.href="c.html";document.location.replace("b.html");

浏览器先通过location.href的方式跳转到c.html,接着又使用location.replace跳转到b.html。此时点击浏览器的后退按钮,浏览器会直接返回a.html,因为c.html这条历史记录被replace覆盖了。

3.window.onhashchange

我们可以通过如下代码形式来监听浏览器URL的哈希值变化:

window.addEventListener("hashchange",function(){
    //do something
},false);//以下代码都会触发hashchange事件
document.location.hash="#a=1";document.location.href="b.html#b=1";document.location.replace("c.html#c=1");

当我们通过改写location的方式引起浏览器URL哈希值变化时,hashchange事件就会触发。如果URL重写导致了页面刷新(例如改变了URL查询参数,或者直接跳向一个跨域地址),hashchange事件会直接被跳过。请注意,URL哈希值变化不一定总是会触发hashchange事件,下面要介绍的方法就是改动URL但不触发hashchange。

4. history.pushState

pushState方法接收三个参数:一个记录历史状态的对象(该对象会在popstate事件触发时被传入,有640K的大小限制);一个代表历史记录标题的字符串;一个与当前URL同源的地址。典型的使用方式如下:

history.pushState({}, "", "b.html");

history.pushState()方法会将URL设置为一个同源URL值,在此之后发送的Ajax请求的Referrer头部都会使用这个新的值,同时在浏览器历史记录中生成一条新的历史记录。但是pushState方法不会刷新页面,pushState引起的URL哈希值变化也不会触发hashchange事件。pushState如果设置了一条与当前URL完全相同的地址,浏览器的历史记录中仍然会新增一条记录。

5.history.replaceState

该方法与history.pushState基本相同,唯一的区别就是replaceState会像location.replace

window.addEventListener("popstate",function(event){
    //do something},false);

ブラウザはまず location.href を介して c.html にジャンプします。 location.replace を使用して b.html にジャンプします。このとき、ブラウザの戻るボタンをクリックすると、c.htmlの履歴が置換により上書きされているため、ブラウザは直接a.htmlに戻ります。

3.window.onhashchange

次のコード形式を通じてブラウザ URL のハッシュ値の変更を監視できます:

document.location.assign("xxx");document.location="xxx";document.location.href="xxx";

場所を書き換えることによってブラウザ URL のハッシュ値を変更すると、hashchange イベントがトリガーされます。 URL の書き換えによってページが更新される場合 (URL クエリ パラメーターの変更、クロスドメイン アドレスへの直接ジャンプなど)、hashchange イベントは直接スキップされます。 URL のハッシュ値の変更が常に hashchange イベントをトリガーするとは限らないことに注意してください。以下に紹介する方法は URL を変更するものですが、hashchange はトリガーしません。


4.history.pushState

pushState メソッドは、履歴状態を記録するオブジェクト (このオブジェクトは、popstate イベントがトリガーされたときに渡され、履歴レコードを表す文字列のサイズ制限があります) の 3 つのパラメーターを受け取ります。 title ;現在の URL と同じ起源を持つアドレス。一般的な使用法は次のとおりです。

document.location.href="c.html";document.location.replace("b.html");

history.pushState() メソッドは URL を同じオリジン URL 値に設定し、この後に送信される Ajax リクエストの Referrer ヘッダーはこの新しい値を使用します。そしてブラウザ履歴に新しい履歴レコードを生成します。ただし、pushState メソッドはページを更新せず、pushState による URL ハッシュ値の変更は hashchange イベントをトリガーしません。 PushState が現在の URL とまったく同じアドレスを設定した場合でも、新しいレコードがブラウザーの履歴に追加されます。

🎜5.history.replaceState🎜🎜このメソッドは基本的に history.pushState と同じです。唯一の違いは、replaceState が location.replace のように前の履歴レコードを上書きすることです。 。 🎜history.pushState とhistory.replaceState の詳細: 🎜http://www.php.cn/🎜🎜6.window.onpopstate🎜🎜次のコード フォームを通じてブラウザの Popstate イベントをリッスンできます: 🎜
window.addEventListener("hashchange",function(){
    //do something
},false);//以下代码都会触发hashchange事件
document.location.hash="#a=1";document.location.href="b.html#b=1";document.location.replace("c.html#c=1");
🎜Similar hashchange イベントに追加すると、URL が変更されると、popstate がトリガーされます (hashchange は、ハッシュ値が変更された場合にのみトリガーされます)。history.pushState とhistory.replaceState は、popstate イベントをトリガーしません。 Popstate イベントは、ブラウザが戻る、進む、またはハッシュ値を書き換えるときにのみトリガーされます。 URL の書き換えによりページが更新される場合 (URL クエリ パラメーターの変更、クロスドメイン アドレスへの直接ジャンプなど)、popstate イベントは直接スキップされます。 🎜ここで、コード内のイベント関数に渡されるパラメータ「event」に注意してください。この状態オブジェクトは、history.pushState メソッドとhistory.replaceState メソッドを呼び出すときに渡される最初の状態パラメータです。この状態転送方法により、履歴記録がある程度処理されます。 🎜🎜JavaScript が URL を操作する方法の詳細な説明 (シングルページ アプリケーションで一般的に使用されます) 🎜🎜JavaScript には、通常のページ ジャンプであっても、シングルページ アプリケーションのハッシュ値の変更であっても、ブラウザ履歴を操作できるメソッドが多数あります。これらのメソッドを使用する 特に単一ページ アプリケーションの場合、これらのメソッドはページ ルーティングのほぼ中心となるメソッドです。この記事では、これらの方法について詳しく説明します。 🎜

1.document.location

location是最有用的BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。事实上,location对象既是window对象的属性,又是document对象的属性。换句话说,window.location和document.location是同一个对象。这里推荐大家使用document.location的写法,以适应非浏览器文档环境。
除去为a标签设置的href属性,大家最常用的跳转方式一定就是:window.location.href=”xxx”;实际上,上面这句代码真正执行的是location.assign方法。简而言之,下面三中URL跳转的写法完全等同,都会立即打开新的URL并在浏览器的历史记录中生成一条记录:

document.location.assign("xxx");document.location="xxx";document.location.href="xxx";

需要注意的是,如果通过这种方式跳转的URL与当前URL完全相同,则页面会刷新,但是浏览器历史记录不会新增。

2.location.replace

功能几乎与location.href=”xxx”;完全相同,只有一个区别,location.replace会在浏览器的历史记录中生成一条记录,并替换前一条记录。举个例子,当我们打开“a.html”页面,页面内有如下两行代码:

document.location.href="c.html";document.location.replace("b.html");

浏览器先通过location.href的方式跳转到c.html,接着又使用location.replace跳转到b.html。此时点击浏览器的后退按钮,浏览器会直接返回a.html,因为c.html这条历史记录被replace覆盖了。

3.window.onhashchange

我们可以通过如下代码形式来监听浏览器URL的哈希值变化:

window.addEventListener("hashchange",function(){
    //do something
},false);//以下代码都会触发hashchange事件
document.location.hash="#a=1";document.location.href="b.html#b=1";document.location.replace("c.html#c=1");

当我们通过改写location的方式引起浏览器URL哈希值变化时,hashchange事件就会触发。如果URL重写导致了页面刷新(例如改变了URL查询参数,或者直接跳向一个跨域地址),hashchange事件会直接被跳过。请注意,URL哈希值变化不一定总是会触发hashchange事件,下面要介绍的方法就是改动URL但不触发hashchange。

4. history.pushState

pushState方法接收三个参数:一个记录历史状态的对象(该对象会在popstate事件触发时被传入,有640K的大小限制);一个代表历史记录标题的字符串;一个与当前URL同源的地址。典型的使用方式如下:

history.pushState({}, "", "b.html");

history.pushState()方法会将URL设置为一个同源URL值,在此之后发送的Ajax请求的Referrer头部都会使用这个新的值,同时在浏览器历史记录中生成一条新的历史记录。但是pushState方法不会刷新页面,pushState引起的URL哈希值变化也不会触发hashchange事件。pushState如果设置了一条与当前URL完全相同的地址,浏览器的历史记录中仍然会新增一条记录。

5.history.replaceState

该方法与history.pushState基本相同,唯一的区别就是replaceState会像location.replace一样覆盖先前历史记录。
关于history.pushState和history.replaceState的更多介绍:
http://www.php.cn/

6.window.onpopstate

我们可以通过如下代码形式来监听浏览器的popstate事件:

window.addEventListener("popstate",function(event){
    //do something},false);

与hashchange事件类似,popstate会在任何URL变化时触发(hashchange只会在哈希值变化时触发),并且history.pushState和history.replaceState也不会触发popstate事件。只有在浏览器后退、前进、重写哈希值的情况下才会触发popstate事件。如果URL重写导致了页面刷新(例如改变了URL查询参数,或者直接跳向一个跨域地址),popstate事件会直接被跳过。
这里请注意一下代码中传给事件函数的参数“event”,event参数中包含state对象,这个state对象就是在调用history.pushState和history.replaceState方法是传入的第一个状态参数,我们可以通过这种状态传递方式来对历史记录进行一定处理。

 以上就是详解JavaScript操作URL的方法(单页应用常用)的内容,更多相关内容请关注PHP中文网(www.php.cn)!


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