【Javascript】リンク(URL)を開く方法(location.hrefとwindow.open())

今回の記事は、

  • 特定の動作の後に違うURLへ遷移させたい
  • Javascriptを使って新規タブでリンクを開きたい
  • Javascriptを使って新規ウィンドウでリンクを開きたい

というお悩みをお持ちの方に向けた記事になっています。


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。

Javascriptでリンクを開く方法

Javascriptでリンクを開く」と一口に言っても、その方法は3つ存在しています。

  • 1. location.hrefを使って同一タブで開く
  • 2. window.open()を使って新規タブで開く
  • 3. window.open()を使って新規ウィンドウで開く

それぞれ順を追って解説していきます。

Javascriptでリンクを開く方法その1 location.href

まずは「location.href」を使用した方法をご紹介します。

windowオブジェクトにはlocationというプロパティが存在しており、このlocationにアクセスすることで、「現在のURL」や「ホスト情報」、「クエリ情報」などを取得することができます。

実装コード

const url = window.location.href

console.log(url)

出力結果

=> https://hataworakuni.net/how-to-open-url-in-javascript

このように、locationプロパティの中のhrefプロパティにアクセスすることで現在のページのURLを取得することができます。

このhrefプロパティを書き換えることで、別のリンクを開くことができるのです。

実装コード

<p>以下のボタンを押すとこのブログのTOPページへ遷移します</p>

<button onClick="changeLocation()">遷移する</button>

<script>
function changeLocation() {
  window.location.href = https://hataworakuni.net/
}
</script>

動作確認用

以下のボタンを押すとこのブログのTOPページへ遷移します

Javascriptでリンクを開く方法その2 window.open()(※新規タブ)

続いては、window.open()メソッドを使って、新規タブでリンクを開く方法をご紹介します。

こちらも非常に簡単で、引数にURLを指定するだけで新規タブでリンクを開くことができます。

実装コード

<p>以下のボタンを押すと新規タブでこのブログが開きます</p>

<button onClick="openNewTab()">新規タブで開く</button>

<script>
function openNewTab() {
  window.open(https://hataworakuni.net/)
}
</script>

動作確認用

以下のボタンを押すと新規タブでこのブログが開きます

Javascriptでリンクを開く方法その3 window.open()(※新規ウィンドウ)

最後は、window.open()メソッドを使って、新規ウィンドウでリンクを開く方法をご紹介します。

先ほどは引数にURLのみを指定しましたが、実はwindow.open()メソッドは第3引数まで指定することができ、それらを設定することで新規ウィンドウでリンクを開くことができるようになります。

実装コード

<p>以下のボタンを押すと新規ウィンドウでこのブログが開きます</p>

<button onClick="openNewWindow()">新規ウィンドウで開く</button>

<script>
function openNewWindow() {
  window.open(https://hataworakuni.net/, null, 'top=100, left=500, width=1000, height=800')
}
</script>

動作確認用

以下のボタンを押すと新規ウィンドウでこのブログが開きます

このように、第2引数と第3引数を指定することで、指定したURLを新規ウィンドウで開くことができます。

この第2引数には「新規ウィンドウ名」を指定するのですが、新たに開いたウィンドウで何か処理を行うということは少ないと思いますので、基本的にはnullで問題ないです。

第3引数には、新規ウィンドウの位置やサイズを指定します。

実装例で見た以外にも様々なオプションが用意されていますので、色々と試してみてくださいね。

オプション設定値設定方法
top画面上からのY座標の位置数値
left画面上からのX座標の位置数値
widthウィンドウの幅数値
heightウィンドウの高さ数値
menubarメニューバーの有無yes か no
toolbarツールバーの有無yes か no
locationアドレスバーの有無yes か no
scrollbarsスクロールバーの有無yes か no
resizableウィンドウのリサイズ可否yes か no

ただし、menubar以下のオプションについては、対応ブラウザが限られているため、出来る限り「位置」と「サイズ」の設定のみ利用するようにしましょう。


傍楽たろう
なお、逆にウィンドウを閉じる方法については以下の記事で詳しく解説していますので、興味のある方はぜひこちらもご覧くださいね。

おすすめ記事

みなさんこんにちは! 今回の記事は、 悩みを抱えた人 ・JavaScriptでウィンドウを閉じるにはどうしたらいいの?・window.close()メソッドを使ってもウィンドウが閉じられない... というお悩みを[…]

【Javascript】window.closeでウィンドウを閉じる方法【コピペで動きます】

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまでJavascriptを使ってリンク(URL)を開く方法について解説してきましたがいかがでしたか?

こうして体系的に整理してみると、それほど難しい内容ではないことがお分かりいただけたかと思います。

今回の記事でしっかりとマスターして、今後の開発でも積極的に使っていってくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。