JavaScript で Onclick を使用して URL に移動する

1. JavaScript で window.open() を使用して URL に移動する
2. JavaScript で window.location を使用して URL に移動する

ウィンドウオブジェクトは、ブラウザとの通信に使用される最も重要なオブジェクトの 1つです。ブラウザのウィンドウを表します。すべてのグローバル変数、関数はウィンドウオブジェクトのメンバーになります。ウィンドウのロケーションオブジェクトは、現在のページの URL を取得し、リダイレクト用の URL を変更するために使用されます。

今日の記事では、JavaScript で onclick を使用して URL にアクセスする方法を学習します。

JavaScript ウィンドウオブジェクトには 2つの方法があります。1つは location 属性を使用する方法、もう 1つは open() メソッドを使用する方法です。

JavaScript で window.open() を使用して URL に移動する

これは JavaScript が提供するウィンドウインターフェイスメソッドであり、指定された URL /リソースを指定された名前の新しいタブまたは既存のブラウザにロードします。このメソッドは、指定された URL を開くための新しいウィンドウを生成します。window.open() メソッドが返すたびに、about:blank が含まれます。現在のスクリプトブロックが実行を完了すると、実際の URL が読み込まれます。

JavaScript での window.open() の構文

window.open(url, windowName, windowFeatures);

パラメータ

• url：これは、有効な URL、画像パス、またはブラウザでサポートされているその他のリソースを受け入れる必須のパラメータです。空の文字列が渡されると、空白の URL で新しいタブが開きます。
• windowName：これはオプションのパラメータであり、ブラウジングコンテキストの名前を指定します。これはウィンドウのタイトルを定義しません。また、このウィンドウ名には空白を含めないでください。
• windowFeatures：これはオプションのパラメータです。このパラメータは、name=value の形式で、またはプロパティがブール値の場合は単に name の形式で、新しいタブのカンマ区切りのウィンドウプロパティを受け入れます。一部の機能は、ウィンドウオブジェクトのデフォルトの位置とサイズです。

コード例：

<button type="button" id="btn" onclick="openGoogleByMethod()">Open Google</button>

window.open('https://www.google.com');

JavaScript で window.location を使用して URL に移動する

これは、window.location の読み取り専用プロパティであり、Location オブジェクトを返します。このオブジェクトには、ドキュメントの現在の場所に関する情報が含まれています。Location オブジェクトには、href、protocol、host、hostname、port などの他のプロパティも含まれています。

ウィンドウオブジェクトは常にスコープチェーンの最上位にあるため、window.location のプロパティには location を使用して直接アクセスすることもできます。ユーザーは、href プロパティまたは assign ロケーションオブジェクトのメソッドを使用して、他の URL /リソースをロード/開くことができます。

構文

window.location = URL_PATH;
window.location.href = URL_PATH;
window.location.assign(URL_PATH);

パラメータ

• URL_PATH：開く必要のある有効な URL を受け入れる必須パラメーターです。この URL は、絶対 URL、相対 URL、アンカーURL、または新しいプロトコルにすることができます。

コード例：

<button type="button" id="btn" onclick="openGoogle()">Open Google</button>

window.location = 'https://www.google.com';
window.location.href = 'https://www.google.com';