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

<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>

<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>

<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>

<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>