window.location =とwindow.location.replace()の違いは何ですか?


273

これら2つの行に違いはありますか?

var url = "http://www.google.com/";
window.location = url;
window.location.replace(url);

3
また、私はここにこれを説明した:stackoverflow.com/questions/846954/...
マティアスBynens

回答:


408

window.location 履歴に項目を追加します。「戻る」をクリックして現在のページに戻ることができます(できるはずです)。

window.location.replace 現在の履歴アイテムを置き換えて、元に戻せないようにします。

を参照してくださいwindow.location

assign(url):指定されたURLでドキュメントをロードします。

replace(url):現在のドキュメントを、指定されたURLにあるドキュメントに置き換えます。このassign()方法との違い はreplace()、現在のページを使用した後 はセッション履歴に保存されないため、ユーザーは[戻る]ボタンを使用してそのページに移動できないことです。

ああ、一般的に言えば:

window.location.href = url;

よりも支持されています:

window.location = url;

52
なぜそれwindow.location.hrefが支持されるのwindow.locationか?
Mathias Bynens 2012


1
質問window.location.replace(URL)-URLが現在のURLとまったく同じ場所を使用した場合、更新/再読み込みが期待できますか、それとも何もしないというオプションはありますか?
user9645 2018

11

TLDR;

使用location.hrefまたはより良い使用window.location.href;

ただし、これを読んだ場合、否定できない証拠が得られます。

真実は使用しても問題ないが、なぜ問題のあることをするのか。あなたはより高い道を進み、おそらくそれが行われるべき方法でそれを行うべきです。

location = "#/mypath/otherside"
var sections = location.split('/')

このコードは、構文的にも論理的にもタイプ的にも完全に正しいものです。

それが持っているlocation代わりに、location.href

これはどうですか

var mystring = location = "#/some/spa/route"

の価値はmystring何ですか?誰かがテストをせずに本当に知っていますか?ここで何が起こるか正確にはわかりません。地獄私はこれを書いたばかりで、それが何をするかさえ知りません。locationオブジェクトですが、文字列を割り当てるか、文字列を渡すか、ロケーションオブジェクトを渡します。これをどのように実装するべきかについていくつかの答えがあるとしましょう。すべてのブラウザが同じことを行うことを保証できますか?

これは、すべてのブラウザーが同じように処理することをほぼ推測できます。

var mystring = location.href = "#/some/spa/route"

これをtypescriptに配置すると、タイプコンパイラはこれがオブジェクトであると想定していると言うので壊れてしまいますか?

locationただし、この会話はオブジェクトだけではありません。この変換とは、どのようなプログラマーになりたいかということです。

このショートカットをとれば、そう、今日は大丈夫かもしれないし、明日は大丈夫かもしれない、地獄はいつまでも大丈夫かもしれないが、あなたは今や悪いプログラマーだ。それはあなたにとって大丈夫ではなく、あなたを失敗させます。

より多くのオブジェクトがあります。新しい構文があります。

文字列のみを受け取り、オブジェクトを返すゲッターを定義すると、最悪の部分は正しいことをしていると思うかもしれません。ここの人々は恥ずかしくあなたを迷わせているので、この賢い方法には素晴らしいと思うかもしれません。

var Person.name = {first:"John":last:"Doe"}
console.log(Person.name) // "John Doe"

ゲッターとセッターを使用すると、このコードは実際に機能しますが、実行できるからといって、それが「賢い」とは限りません。

プログラミングをしているほとんどの人は、プログラミングが大好きで、上達が大好きです。ここ数年、私はかなり良くなり、多くを学びました。特にあなたがライブラリを書くときに私が今知っている最も重要なことは、一貫性と予測可能性です。

一貫してできることをしてください。

+"2"<-これはここで文字列を解析して数値にします。あなたはそれを使うべきですか?または使用する必要がありますparseInt("2")か?

どうvar num =+"2"ですか?

あなたが学んだことから、stackoverflowの心から、私はあまり望んでいません。

これらの2つの単語を一貫して予測可能な形でフォローし始めた場合。Stackoverflowに関する多くの質問に対する正しい答えがわかります。

これがどのように成功するかをお見せしましょう。通常、私は;書くJavaScriptのすべての行に配置します。私はそれがより表現力豊かであることを知っています。私はそれがより明確であることを知っています。私は私のルールに従っています。ある日、私はそうしないことに決めました。どうして?なぜなら、それはもはや必要ではなく、JavaScriptはそれなしでできると多くの人々が私に言っているからです。だから私がこれをすることに決めたもの。プログラマーとしての自分を確信できるようになったので(言語を習得することの成果を楽しむ必要があるので)、非常にシンプルなものを書いてチェックしませんでした。カンマを1つ削除しましたが、カンマを1つ削除するという単純なことを再テストする必要はないと思いました。

これに似たものをes6とbabelで書いた

var a = "hello world"
(async function(){
  //do work
})()

このコードは失敗し、理解するのに永遠にかかりました。なんらかの理由で

var a = "hello world"(async function(){})()

「hello world」は関数ではない、と言っていたソースコードの奥深くに隠されていました。

さらにおもしろいのは、ノードは変換されたコードのソースマップを表示しないことです。

とても愚かな時間を無駄にしました。私は誰かにES6がいかに素晴らしいかについてもプレゼンテーションしていたので、デバッグを開始して、頭痛のない優れたES6がいかに優れているかを示す必要がありました。説得力がありません。

これがあなたの質問に答えてくれることを願っています。これは古い問題であり、それは将来の世代、まだ学んでいる人々のためのものです。

どちらの方法でも問題ない、と人々が言っ​​たときの質問。おそらく、経験豊富な人が賢明に語る方が賢明です。

誰かが場所オブジェクトを上書きした場合はどうなりますか?彼らは古いブラウザのためにシムをするでしょう。シムが必要な新機能が追加され、3年前のコードは失敗します。

熟考する最後のメモ。

クリーンで明確な目的のあるコードを書くことは、コードに対して正しいか間違っているかで答えることができない何かを行います。それがすることはそれがあなたのコードをイネーブラーにすることです。

コード間の中断を心配せずに、プラグインやライブラリーをより多く使用できます。

記録のために。使用する

window.location.href


24
長く有益な答え、情熱的に主張。しかし、window.location.hrefoverの使用について議論する際にwindow.location、実際にこれらとの違いを尋ねているという質問を忘れていましたwindow.location.replace()
AntonChanning

10
TLDRが表示されたときはいつでも、5倍長い応答ではなく、短い応答を期待しています。
user9645 2018

3
TLDR; use location.href or better use window.location.href; TLDRはこの行です。残りは「答え」です。
Elysiumplain

珍しいユースケースを紹介しても妥当だとは思いません。すなわちmystring = location.href = "#/some/spa/route"。さらに、多くの言語では、何らかの方法で(暗黙の)タイプキャストが許可されます。結局のところ、javascriptは動的型付き言語であり、型の概念をその上に置き、それが良くないと言っても意味がありません。
アップルアップル

1
誰かが場所のオブジェクトを上書きした場合にどのような。まあ、誰かが上書きしconsoleたりシャドウしたりするとどうなるのかと同じようにwindowもっと大きな問題があります。
アップルアップル
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.