JavaScriptでURLリダイレクトする方法

JavaScriptでURLリダイレクトする方法、メモっときます。

location.href(‘転送先URL’)を使う方法
1. window って？
注意点

location.href(‘転送先URL’)を使う方法

location.href(‘転送先URL’)
でリダイレクトできます。

  <script>
    window.location.href('転送先URL')
  </script>

javascriptでリダイレクト(転送)を設定する方法と注意点を徹底解説！ | Strategy by ipe

「javascriptで転送できるようにしたいけど、どうしたらいいのかわからない」と設定方法に困ってはいませんか？今回はjavascriptでリダイレクトを設定する方法、さらに状況に合わせたリダイレクトコードの例を紹介し

<script type=”text/javascript”>
<!–-
setTimeout(“link()”, 0);
function link(){
location.href=’転送先URL’;
}
–>
</script>

window. はつけなくてもよいんですね。

window って？

windowってページ全体って意味だっけ？
調べます。

MDNは正確性重視で書かれているせいか、ちょっと分かりづらかったです。。

【JavaScript】Windowオブジェクトって結局何なの...?

たかぽんどーも！たかぽんです！今回はJSを使ってるとよくみるwindow.hogeみたいなやつのwindowってなんなの...?っていう疑問がいつまでたっても拭えずにいたため...重い腰を上げて少し調

どうやらまっさらな状態だとwindowのスコープがデフォルトみたいです。

ユーザーは常にwindowと同じ階層にいるので、参照する場合も現在位置からdocument、そしてその下にあるbodyをといった感じでアクセスできるみたい。

ちなみに、普段はあまりしないのですが、windowは自身を参照することができるため、window.document.bodyでもうまくいくみたいです。

そう考えると、何もしなくてもwindowにいるからわざわざ参照する意味ない気もしますね…w

こちらのサイト様が検証もしてくれててわかりやすかったです。

windowは、DOMの一番上層って感じですかね。
んで、ユーザーすでにwindowの場所に居るから別に指定しなくてもいいと。

LinuxのコマンドとかでディレクトリPathを指定するときに

./ (カレントディレクトリ＝現在いる場所のPathを意味します）

をつけてもつけなくてもおんなじってことと、少し似てますかね。

注意点

JavaScriptでリダイレクトする場合は、サーバー側でリダイレクトするのと違って、
一度クライアント側（ユーザーが使ってるWebブラウザ）で、リダイレクト前のページを読み込んでから、その後にリダイレクト先に転送されます。

つまり、

サーバー側でリダイレクトする場合:

ユーザーがリクエストする（ページにアクセスする）
サーバー側がリダイレクト後のページをレスポンスとしてユーザーに返す
クライアント側（ユーザーのWebブラウザ）では、リダイレクト後のページが閲覧できる

クライアント側（JavaScriptなど）でリダイレクトする場合:

ユーザーがリクエストする（ページにアクセスする）
サーバー側がリダイレクトする前のページをレスポンスとしてユーザーに返す
クライアント側（ユーザーのWebブラウザ）では、リダイレクトのJavaScriptが実行される→リダイレクト後のページを頂戴！とサーバーにリクエストが行く
サーバー側がリダイレクト後のページをレスポンスとしてユーザーに返す
クライアント側（ユーザーのWebブラウザ）では、リダイレクト後のページが閲覧できる

という違いがありますね。

ユーザーがWebブラウザでアクセスした際の見た目の違いとしても、

サーバー側でリダイレクトする場合:

ユーザーがリクエストする（ページにアクセスする）
クライアント側（ユーザーのWebブラウザ）では、リダイレクト後のページが即閲覧できる

クライアント側（JavaScriptなど）でリダイレクトする場合:

ユーザーがリクエストする（ページにアクセスする）
クライアント側（ユーザーのWebブラウザ）では、リダイレクト前のページが一瞬画面に表示される
クライアント側（ユーザーのWebブラウザ）では、リダイレクト後のページが閲覧できる

という感じで、JavaScriptのリダイレクトを行った場合、一瞬、リダイレクト前のページが見えちゃいます。

その違いを理解した上で利用しましょう～

location.href(‘転送先URL’)を使う方法

window って？

注意点

コメント