JavaScriptでリンクを制御！同一画面や新しいウインドウで開く方法 byウェブカツ

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

という時に、JavaScriptでリンクを制御する方法を紹介する。

HTMLでリンクを開く

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

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

html

<a href="https://www.webukatu.com/">ウェブカツTOP</a>

ウェブカツTOP

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

JavaScriptでリンクを開く

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

同一画面でリンクを開く

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

javascript

location.href='URL';

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

html

<input type="button" value="ウェブカツTOP" onClick="location.href='https://www.webukatu.com'">

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

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

javascript

window.open('URL', '_blank');

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

html

<input type="button" value="ウェブカツTOP" onClick="window.open('https://www.webukatu.com', '_blank')">

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

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

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

javascript

//現在のURLを取得
console.log(location.href);

//指定したURLへ遷移
location.href = 'index.html';

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

まとめ

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

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

から紹介した。

JavaScriptでリンクを制御したい場合はぜひ参考にしてほしい。

---

かずきち

プログラミング学習サイト「ウェブカツ!!」の顧問。
不動産、保険の営業マンから、エンジニアへ転身。
「HTMLって何？」という状態から3ヶ月の独学のみでエンジニアへ転職し、１年で年収１千万を稼ぐエンジニアへ。
独学時代のプログラミング学習の分かりにくさや、「技術しか出来ずに稼げていないエンジニア」の現状を変えるため「ウェブカツ」を立ち上げ運営している。

【ウェブカツ公式WEBサイト】
https://webukatu.com/