JavaScriptでリンクを制御!同一画面や新しいウインドウで開く方法

WEBページを制作していてリンク先を指定したい時、aタグを使えば簡単に設定できます。

ですが、

・inputタグのボタンにリンクを指定したい
・a要素のクリック操作以外でページを遷移させたい

という場面もありますよね。

そこで今回は、JavaScriptでリンクを制御する方法をご紹介します。

ぜひ参考にしてみてくださいね。

HTMLでリンクを開く

HTMLでリンクを開きたい場合、a要素にhref属性を指定します。

例えば以下のように記述すると

ウェブカツTOP

このようにhref属性に指定したURLへジャンプしますね。

JavaScriptでリンクを開く

続いて、JavaScriptでリンクを開きたい場合はどのように指定するのかご紹介します。

同一画面でリンクを開く

同じ画面でリンクを開きたい場合は、location.hrefのプロパティにURLを指定します。

location.href=’URL’;

リンクを開くボタンを設置したい場合、以下のようにonClickイベントにリンクを開く処理を指定します。

新しいウインドウやタブでリンクを開く

新しいウインドウやタブでリンクを開きたい場合は、window.openを指定します。

window.open(‘URL’, ‘_blank’);

新しいウインドウでリンクを開くボタンを設置したい場合は、同じようにonClickイベントにリンクを開く処理を指定します。

location.hrefは現在のURLも取得できる

location.hrefはプロパティを指定するとそのURLへ画面が遷移しますが、現在のWEBページのURLを取得することもできます。

読み取った場合 現在のWEBページのURLを取得
書き込んだ場合 新しいURLにページが遷移

相対パスを指定した場合、現在のURLが基点となります。

まとめ

以上、JavaScriptでリンクを開く方法について

・同一画面でリンクを開く方法
・新しいウインドウでリンクを開く方法
・location.hrefについて

からご紹介しました。

JavaScriptでリンクを制御したい場合はぜひ参考にしてみてくださいね。