WEBページを制作していてリンク先を指定したい時、aタグを使えば簡単に設定できます。
ですが、
・inputタグのボタンにリンクを指定したい
・a要素のクリック操作以外でページを遷移させたい
という場面もありますよね。
そこで今回は、JavaScriptでリンクを制御する方法をご紹介します。
ぜひ参考にしてみてくださいね。
目次
HTMLでリンクを開く
HTMLでリンクを開きたい場合、a要素にhref属性を指定します。
例えば以下のように記述すると
|
1 |
<a href="https://www.webukatu.com/">ウェブカツTOP</a> |
このようにhref属性に指定したURLへジャンプしますね。
JavaScriptでリンクを開く
続いて、JavaScriptでリンクを開きたい場合はどのように指定するのかご紹介します。
同一画面でリンクを開く
同じ画面でリンクを開きたい場合は、location.hrefのプロパティにURLを指定します。
location.href=’URL’;
リンクを開くボタンを設置したい場合、以下のようにonClickイベントにリンクを開く処理を指定します。
|
1 |
<input type="button" value="ウェブカツTOP" onClick="location.href='https://www.webukatu.com'"> |
新しいウインドウやタブでリンクを開く
新しいウインドウやタブでリンクを開きたい場合は、window.openを指定します。
window.open(‘URL’, ‘_blank’);
新しいウインドウでリンクを開くボタンを設置したい場合は、同じようにonClickイベントにリンクを開く処理を指定します。
|
1 |
<input type="button" value="ウェブカツTOP" onClick="window.open('https://www.webukatu.com', '_blank')"> |
location.hrefは現在のURLも取得できる
location.hrefはプロパティを指定するとそのURLへ画面が遷移しますが、現在のWEBページのURLを取得することもできます。
| 読み取った場合 | 現在のWEBページのURLを取得 |
|---|---|
| 書き込んだ場合 | 新しいURLにページが遷移 |
|
1 2 3 4 5 |
//現在のURLを取得 console.log(location.href); //指定したURLへ遷移 location.href = 'index.html'; |
相対パスを指定した場合、現在のURLが基点となります。
まとめ
以上、JavaScriptでリンクを開く方法について
・同一画面でリンクを開く方法
・新しいウインドウでリンクを開く方法
・location.hrefについて
からご紹介しました。
JavaScriptでリンクを制御したい場合はぜひ参考にしてみてくださいね。
