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