【Javascript】別ウィンドウを表示する方法

Javasciptを利用して別ウィンドウを表示し、既に対象のボタンから別ウィンドウが開かれていた場合には
そのウィンドウに対して再度更新する方法について紹介します。

簡単に説明するとwindowのopenメソッドを使うことで
別ウィンドウの表示は可能です。

open()メソッドについて
第1引数 URL
第2引数 ウィンドウ名
第3引数以降 オプション(省略可)

ここで重要になってくるのが第2引数のウィンドウ名です。
ここを特定の一意の名前にしておけば、何度クリックしても特定のウィンドウに表示/更新されます。

サンプルコードは下記の通りです。

【HTML】

<input type="button" class="newWindowBtn" value="miko.info">
<input type="button" class="newWindowBtn2" value="miko.info/blog">

【Javascript】

$(function() {
    $(".newWindowBtn").click(function() {
        openDispWindow('https://miko.info', 'openWindow', 600, 500);
    });

    $(".newWindowBtn2").click(function() {
        openDispWindow('https://miko.info/blog', 'openWindow2', 600, 500);
    });
});

function openDispWindow(url, windowname, width, height) {
    var features="location=no, menubar=no, status=yes, scrollbars=yes, resizable=yes, toolbar=no";
    if (width !== 0) {
        if (window.screen.width > width) {
            features+=", left="+(window.screen.width-width)/2;
        } else {
            width=window.screen.width;
            features+=", width="+width;
        }
    }
    if (height !== 0) {
        if (window.screen.height > height) {
            features+=", top="+(window.screen.height-height)/2;
        } else {
            height=window.screen.height;
            features+=", height="+height;
        }
    }
    window.open(url,windowname,features);
}

ツールバーなども消せるので使いこなせば色々と使えそう(:3_ヽ)_

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です