【JavaScript入門】リンクを開く方法(location.href/window.open)

こんにちは!エンジニアの中沢です。

JavaScriptにはリンクを開くためにいくつかの方法があります。

JavaScriptを使ってリンクの制御ができるので、上手く活用してください。

この記事では、

・Javascriptでリンクを開く方法
・新しいタブでリンクを開く方法

という基本的な内容から、

・新しいウィンドウでリンクを開く方法
・リンクを開くボタンを設置する方法

などの応用的な使い方に関しても解説していきます。

今回はこれらの方法を覚えるために、リンクのさまざまな使い方をわかりやすく解説します!

Javascriptでリンクを開く方法

ここでは、Javascriptでリンクを開く方法を解説します。

Javascriptでリンクを開くには、location.hrefに開きたいリンクのURLを代入します。

次のプログラムで確認してみましょう。

location.href = 'https://www.sejuku.net/blog/';

これで指定したリンクを開くことができました。

新しいタブでリンクを開く方法

ここでは、新しいタブでリンクを開く方法を解説します。

新しいタブでリンクを開くには、window.openの引数に開きたいリンクのURLを代入します。

次のプログラムで確認してみましょう。

window.open('http://www.sejuku.net', '_blank');

このようにして、新しいタブでリンクを開くことができました。

新しいウィンドウでリンクを開く方法

ここでは、新しいウィンドウでリンクを開く方法を解説します。

新しいウィンドウでリンクを開くには、window.openの引数でウィンドウのサイズを指定します。

次のプログラムで確認してみましょう。

window.open('https://www.sejuku.net/blog/', null, 'width=500,height=500');

このようにして、新しいウィンドウでリンクを開くことができました。

window.openの使い方はこちらの記事で詳しく解説しているので、ぜひ確認してください。

【JavaScript入門】window.open()で新規タブやウィンドウを開く方法!
更新日 : 2019年4月25日

リンクを開くボタンを設置する方法

ここでは、リンクを開くボタンを設置する方法を解説します。

リンクを開くボタンを設置するには、ボタンのonClickイベントにリンクを開く処理を指定します。

次のプログラムで確認してみましょう。

<input type="button" value="リンクを開く" onClick="document.location='https://www.sejuku.net/blog/';">

このようにして、リンクを開くボタンを設置することができました。

locationの使い方

locationの使い方はこちらの記事で詳しく解説しているので、ぜひ確認してください。

JavaScriptでURLを取得するには?locationの使い方を徹底解説
更新日 : 2019年10月11日

まとめ

いかがでしたか?

今回はリンクを開く方法を解説しました。

リンクを開くときには新しいタブで開くなど方法があるので、ぜひ活用してくださいね。

もし、リンクを開く方法を忘れてしまったらこの記事を確認してください!

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

中沢 丈

中沢 丈

フリーランスエンジニア。
システム開発からコンテンツ作成まで幅広く対応します。

連絡先はこちらです。
[email protected]