こんにちは！エンジニアの中沢です。
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の使い方はこちらの記事で詳しく解説しているので、ぜひ確認してください。
リンクを開くボタンを設置する方法
ここでは、リンクを開くボタンを設置する方法を解説します。
リンクを開くボタンを設置するには、ボタンのonClickイベントにリンクを開く処理を指定します。
次のプログラムで確認してみましょう。
<input type="button" value="リンクを開く" onClick="document.location='https://www.sejuku.net/blog/';">
このようにして、リンクを開くボタンを設置することができました。
locationの使い方
locationの使い方はこちらの記事で詳しく解説しているので、ぜひ確認してください。
まとめ
いかがでしたか？
今回はリンクを開く方法を解説しました。
リンクを開くときには新しいタブで開くなど方法があるので、ぜひ活用してくださいね。
もし、リンクを開く方法を忘れてしまったらこの記事を確認してください！
