JavaScriptで以前のURLを取得する方法は?


230

JavaScriptで以前のURLを取得する方法はありますか?このようなもの:

alert("previous url is: " + window.history.previous.href);

そのようなものはありますか?それともクッキーに保存するだけですか?知っておく必要があるのは、アンカーなどを使わずに、以前のURLから現在のURLに遷移できることだけです。

回答:


351
document.referrer

多くの場合、ユーザーがリンクをクリックして現在のページにアクセスした場合(アドレスバーに直接入力するのではなく、場合によってはフォームを送信することで信じます)、ユーザーが最後にアクセスしたページのURLが表示されます。DOM Level 2で指定されています詳細はこちら。

window.historyセキュリティとプライバシー上の理由から、ナビゲーションは許可されますが、セッション内のURLにはアクセスできません。より詳細なURL履歴が利用可能であれば、アクセスするすべてのサイトで、アクセスした他のすべてのサイトを見ることができます。

自分のサイト内を移動する状態を処理している場合は、通常のセッション管理手法の1つであるCookieデータ、URLパラメータ、またはサーバー側のセッション情報を使用する方が、脆弱性が低く、確かに便利です。


4
リンクを介して現在のページに到達した場合(ただし、ブックマークやアドレスバーへの入力などではない場合)は、document.referrerもあります。
Hellion 2010

68
以前のURLをサイトのCookieに保存してしまいましたdocument.referrerが、常に機能するとは限りません。 $.cookie("previousUrl", window.location.href, {path:"/"});
ランスポラール

4
あなたは私をJavaScriptの苦痛の世界から救ってくれました!
アンナ・ラム

8
以前はリファラーではありません。それらを混同しないでください
Green

1
document.referrerは最後のURLからのハッシュを保存しません...最後のURLのみを参照します。
Nmaster88

29

URLを知らずに前のページに移動する場合は、新しい履歴APIを使用できます。

history.back(); //Go to the previous page
history.forward(); //Go to the next page in the stack
history.go(index); //Where index could be 1, -1, 56, etc.

ただし、HTML5 History APIをサポートしていないブラウザでは、履歴スタックのコンテンツを操作できません

詳細については、ドキュメントを参照してください


2
URL、href = ''を知ってそれを行う方法
summu

@summuそれはブラウザ自体に保存されます
Ahmed Taha

20

document.referrer すべての状況で実際のURLと同じではありません。

2フレームのフレームセットを確立する必要があるアプリケーションがあります。1つのフレームは既知であり、もう1つはリンク元のページです。document.referrerフレームセットドキュメントに実際のファイル名を渡す必要がないため、これは理想的だと思われます。

ただし、後で下部フレームページを変更して使用するhistory.back()と、元のページが下部フレームに読み込まれず、代わりに再読み込みさdocument.referrerれ、その結果、フレームセットが失われ、元の開始ウィンドウに戻ります。

これを理解するのに少し時間がかかりました。したがって、履歴配列でdocument.referrerは、URLだけでなく、参照元ウィンドウの仕様でもあるようです。少なくとも、それが現時点で理解できる最良の方法です。


私の最新のテストの時点では、追跡を避けるために、「document.referrer」は完全なURLではなくドメイン名のみを返すようになりました。
Akash Kumar Seth、

12

サーバーへの往復ではなく、アプリ/ブラウザーでルーティングが行われるWebアプリまたはシングルページアプリケーション(SPA)を作成している場合は、次の操作を実行できます。

window.history.pushState({ prevUrl: window.location.href }, null, "/new/path/in/your/app")

次に、新しいルートで次のようにして、以前のURLを取得できます。

window.history.state.prevUrl // your previous url

0

Node.jsとExpressを使用しているユーザーは、現在のページのURLを記憶するセッションCookieを設定できるため、次のページの読み込み時にリファラーを確認できます。次に、express-sessionミドルウェアを使用する例を示します。

//Add me after the express-session middleware    
app.use((req, res, next) => {
    req.session.referrer = req.protocol + '://' + req.get('host') + req.originalUrl;
    next();
});

次に、次のようにリファラーCookieの存在を確認できます。

if ( req.session.referrer ) console.log(req.session.referrer);

以前のURLが別のWebサイトだった、セッションがクリーンアップされた、または作成された(最初のWebサイトのロード)場合、このメソッドはリファラーCookieが常に存在するとは限りません。


0
<script type="text/javascript">
    document.write(document.referrer);
</script>

document.referrer あなたの目的を果たしますが、IE9より前のバージョンのInternet Explorerでは機能しません。

Chrome、Mozilla、Opera、Safariなど、他の一般的なブラウザで動作します。


私のためのIE 9での作品
frodo2975

-8

これにより、以前にアクセスしたURLに移動します。

javascript:history.go(-1)

1
OPは、以前のURLにアクセスする方法ではなく、取得する方法を尋ねました
Matt Jensen
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.