こんにちは！エンジニアの中沢です。
JavaScriptにはリンクを開くためにいくつかの方法があります。
JavaScriptを使ってリンクの制御ができるので、上手く活用してください。
この記事では、
・Javascriptでリンクを開く方法
・新しいタブでリンクを開く方法
という基本的な内容から、
・新しいウィンドウでリンクを開く方法
・リンクを開くボタンを設置する方法
などの応用的な使い方に関しても解説していきます。
今回はこれらの方法を覚えるために、リンクのさまざまな使い方をわかりやすく解説します！
JavaScriptを駆使してリンクを自在に操るスキルを身につければ、Web制作の幅が広がります。しかし、一人で学ぶのは難しいと感じることもあるかもしれません。そんなときは、プロのサポートを受けられる環境を活用するのも一つの手です。
このセミナーでは、生成AIとWeb制作を組み合わせた実践的なスキルを学べます。すぐに活用できる具体的なノウハウが満載で、収益を上げるための道筋をしっかりと示してくれます。
セミナーの詳細を確認して、自分に合った学び方を見つけてみませんか？
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の使い方はこちらの記事で詳しく解説しているので、ぜひ確認してください。
まとめ
いかがでしたか？
今回はリンクを開く方法を解説しました。
リンクを開くときには新しいタブで開くなど方法があるので、ぜひ活用してくださいね。
もし、リンクを開く方法を忘れてしまったらこの記事を確認してください！
