Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptリダイレクトを実行する方法

Webページをリダイレクトする方法はいくつかあります。HTMLのメタタグを使用するクライアント側と、HTTPリダイレクトメソッドを使用するサーバー側です。この記事では、JavaScriptを使用してWebページをリダイレクトする方法について説明します。

2つの方法

ページリダイレクトにJavaScriptコードを使用する方法は2つあります。どちらもウィンドウロケーションオブジェクトを含みます。

href

最初の方法は、ロケーションオブジェクト（ウィンドウオブジェクトの一部）のhrefプロパティを含みます。あなたがしなければならない唯一のことは、リダイレクトが行きたいURLをlocation.hrefとして割り当てることによってリダイレクトを処理することです。これは、ページが読み込まれたときに実行されるJavaScript関数で行います。 

<html>
<head>
 <style>
   body {
     font-family: 'Roboto';
     margin: 20px;
   }
   p {
     margin: 0;
     padding: 0;
   }
 </style>
 
</head>
 <body onload=handleRedirect("https://www.careerkarma.com/blog/html")>
     You are being redirect to <a rel="noreferrer noopener" href="https://careerkarma.com/blog/html">https://www.careerkarma.com/blog/html.</a> Please click this link if not redirected in five seconds
 </body>
 <script>
   const handleRedirect = (url) => {
     location.href = url;
   }
 </script>
</html>

ドキュメントの下部、本文タグの直前にスクリプトタグを追加しました。これが私たちのJavaScriptが行くところです。 handleRedirectと呼ばれる関数には、urlと呼ばれるパラメーターがあります。そのURLの値にlocation.hrefを割り当てます。

ドキュメントの本文の上部に、onloadイベントがあります。このonloadイベントは、割り当てられたJavaScript関数を実行します。ここでは、移動先のURLを渡しました。リダイレクトはすぐに行われ、CareerKarmaのブログ投稿のHTML部分に移動します。

ページがリダイレクトされる前に少し休止を追加したい場合は、setTimeoutを使用してそれを行うことができます 関数。方法は次のとおりです。 

const handleRedirect = (url) => {
     setTimeout(() => {
       location.href = url;
     }, 2000);
   }

他のすべては同じままです。

このメソッドは、元のページを履歴スタックに追加します。ブラウザの戻るボタンからアクセスできます。代わりにURLを置き換える別の方法があります。次に、その方法を確認します。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

交換

ロケーションオブジェクトのプロパティに新しいURLを割り当てる上記で作成したメソッドとは異なり、location.replace() 元のURLを割り当てて、指定したURLに置き換えるメソッドです。

このメソッドは、元のURLをブラウザのスタックに配置せず、宛先をリダイレクトされたURLに置き換えます。方法は次のとおりです。 

<html>
<head>
 <style>
   body {
     font-family: 'Roboto';
     margin: 20px;
   }
   p {
     margin: 0;
     padding: 0;
   }
 </style>
 
</head>
 <body onload=location.replace("https://www.careerkarma.com/blog/html")>
     You are being redirect to <a rel="noreferrer noopener" href="https://careerkarma.com/blog/html">https://www.careerkarma.com/blog/html.</a> Please click this link if not redirected in five seconds
 </body>
</html>

ご覧のとおり、このワンライナーにはスクリプトタグはまったく必要ありません。ドキュメントが読み込まれると、location.replaceメソッドが実行され、括弧で囲まれたサイトに移動します。

それでおしまい！ JavaScriptを使用して新しいWebページにリダイレクトできるようになりました。


  1. JavaScriptを使用して別のWebページにリダイレクトする方法は？

    JavaScriptを使用して別のWebページにリダイレクトするには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <h1>Redirect to a Webpage Example</h1> <button class="redirectBtn">Redirect</button> <h2>Click the above button to Redirect to another Webpage</h2> <scri

  2. JavaScriptを使用してURLオブジェクトを作成するにはどうすればよいですか？

    以下は、JavaScriptを使用してURLオブジェクトを作成するためのコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style&g