【JavaScript】リンク(URL)を開く3つの方法 | 新規タブや新規ウィンドウでリンクを開く

URL-Open

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、JavaScriptでリンク(URL)を開く3つの方法について解説します。

JavaScriptのwindowオブジェクトを活用すると、

特定の動作の後に違うURLへ遷移させたり、新規タブ・新規ウィンドウでリンクを開くことができます。

JavaScriptで、リンク(URL)を開く方法(location.hrefとwindow.open())

JavaScriptでリンク(URL)を開く実装の際には、window.location.hrefwindow.open() を使っていきます。

次の3つのような要件の実装をしたいときに役立ちます。

  1. JavaScriptで特定の動作の後に違うURLへ遷移させたい
  2. JavaScriptで新規タブでリンクを開きたい
  3. JavaScriptで新規ウィンドウでリンクを開きたい

window.location.hrefを使って、リンク(URL)を開く

window.location.href には、アクセス中のWebページのURLが格納されています。

そんな window.location.href に移動したい WebページのURLを代入すれば、ページ遷移ができます。

window.location.href を使って、リンク(URL)を開く実装のSampleは、次のようになります。

<h2>location.hrefを使って、リンク(URL)を開く</h2>

<p>ページ移動・リンクを開くボタン</p>

<button onClick="changeLocation()">遷移する</button>

<script>
    // 1. window.location.href には、アクセス中のWebページのURLが格納されている。
    const url = window.location.href;

    console.log(url);

    // 2. window.location.href に移動したい WebページのURLを代入すれば、ページ遷移できる。
    function changeLocation() {
        window.location.href = "https://masanyon.com/";
    }
    
</script>

window.open()を使って「新規タブ」でリンクを開く(Webページを開く)

window.open() の引数に、開きたいWebページのURLを渡せば、新規タブでWebページを開く実装の完了です。

window.open()を使って「新規タブ」でリンクを開く(Webページを開く)実装のSampleは次のようになります。

<h2>window.open()を使って「新規タブ」でリンクを開く(Webページを開く)</h2>

<p>新規タブで、リンクを開く(Webページを開く)ボタン</p>

<button onClick="openNewTab()">New-Tab-Open</button>

<script>
    // window.open() の引数に、開きたいWebページのURLを渡せば、新規タブでWebページを開ける。
    function openNewTab() {
        window.open("https://masanyon.com/");
    }
</script>

window.open()を使って「新規ウィンドウ」でリンクを開く(Webページを開く)

window.open() の第3引数に「 popup 」を設定すると、新規Windowでリンクを開くことができます。

window.open()を使って「新規ウィンドウ」でリンクを開く(Webページを開く)実装のSampleは、次のようになります。

<h2>window.open()を使って「新規ウィンドウ」でリンクを開く(Webページを開く)</h2>

<p>新規ウィンドウで、リンクを開く(Webページを開く)ボタン</p>

<button onClick="openPopup()">New-Window-Open</button>

<script>
    // window.open() の第3引数に「 popup 」を設定すると、新規Windowでリンクを開くことができます。
    function openPopup() {
        window.open("https://masanyon.com/",null, "popup");
    }
</script>

また、第3引数の”popup”部分を次のようにすると、新規Windowの幅や高さなどの指定をすることもできます。

<h2>window.open()を使って「新規ウィンドウ」でリンクを開く(Webページを開く)</h2>

<p>新規ウィンドウで、リンクを開く(Webページを開く)ボタン Ver. Width-Height-指定</p>

<button onClick="openNewWindow()">New-Window-Open Ver. Width-Height-指定</button>

<script>
    
    // 新規Windowの幅や高さなどの指定をすることもできます。
    function openNewWindow() {
        window.open("https://masanyon.com/", null, "top=300, left=500, width=800, height=800");
    }
</script>

Twitterやってます!Follow Me!

神聖グンマー帝国の逆襲🔥

神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!

参考・引用

  1. 【Javascript】リンク(URL)を開く方法(location.hrefとwindow.open())
  2. Window.open()

最近の投稿