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_ヽ)_