menu
menu

キーワード検索

 

最近の投稿

JavaScriptで新しいウィンドウを開く

  • Labs

JavaScript

こんにちは(・∀・)

Lightbox系のプラグインが使われるようになってきてJavaScriptを使って新しくウィンドウを開くという動作はあまり使われなくなってきましたが、先日これを使う機会があったのとそれにともない少し修正した部分がありましたのでページを更新しました。

JavaScriptを使えば新しくウィンドウを開く際の細かな指定ができます。ウィンドウの位置、サイズ、ツールバー・メニューバー等の表示非表示、サイズ変更の可不可等々。デザインに合わせて設定する事ができます。

jQuery版もできました。よろしければご覧ください。
jQueryで新しいウィンドウを開く

新しいWindowを開く際の設定


window.open(①url,②name,③詳細);④return false;
  1. urlを記述します。
  2. 名前を記述します。_blankや_selfなどのターゲット属性値か、ウィンドウ名を指定します。
  3. 詳細、新しいWindowを開く際に表示するスタイルを指定します。カンマで区切って複数指定できます。
  4. return falseを記述してa要素を無効化。

新しいWindowを開く際に③詳細で指定できる設定は次の通りです。

ウィンドウの位置

Topから50px、Leftから50pxの位置に表示したい場合はtop=50、left=50と記述。
top=50
left=50

ウィンドウのサイズ

width500px、height500pxにしたい場合はwidth=500、height=500と記述。
width=500
height=500

ツールバーやメニューバーの有無

0で無し、1で有り、またはnoで無し、yesで有り。
toolbar=0
location=0
directories=0
status=1
menubar=0
scrollbars=1

ウィンドウのサイズ変更

0で不可、1で可、またはnoで不可、yesで可。
resizable=0

1. 新しいウィンドウを開く(インライン)

リンク要素に直接記述する方法。

HTML

<a href="javascript:void(0)" onclick="window.open('index.html','_blank','top=50,left=50,width=500,height=500,scrollbars=1,location=0,menubar=0,toolbar=0,status=1,directories=0,resizable=1');return false;" id="demo1">Demo1</a>
<input type="button" value="Demo2" onclick="window.open('index.html','_blank','top=50,left=50,width=500,height=500,toolbar=0,location=0,directories=0,status=1,menubar=0,scrollbars=1,resizable=0');return false;" id="demo2">
<button onclick="window.open('index.html','_blank','top=50,left=50,width=500,height=500,toolbar=0,location=0,directories=0,status=1,menubar=0,scrollbars=1,resizable=0');return false;" id="demo3">Demo3</button>
Result

Demo1

2. 新しいウィンドウを開く

HTMLとは切り離して記述する方法。

HTML

<a href="javascript:void(0)" id="demo4">Demo4</a>
<input type="button" value="Demo5" id="demo5">
<button id="demo6">Demo6</button>
JavaScript

function openwindow2() {
demo4.onclick = function() {
window.open('index.html','_blank','top=50,left=50,width=500,height=500,scrollbars=1,location=0,menubar=0,toolbar=0,status=1,directories=0,resizable=1');
return false;
}
demo5.onclick = function() {
window.open('index.html','_blank','top=50,left=50,width=500,height=500,scrollbars=1,location=0,menubar=0,toolbar=0,status=1,directories=0,resizable=1');
return false;
}
demo6.onclick = function() {
window.open('index.html','_blank','top=50,left=50,width=500,height=500,scrollbars=1,location=0,menubar=0,toolbar=0,status=1,directories=0,resizable=1');
return false;
}
}
if(window.addEventListener) {
window.addEventListener("load",openwindow2,false);
} else if(window.attachEvent) {
window.attachEvent("onload",openwindow2);
}
Result

Demo4

3. 新しいウィンドウを画面中央に開く(インライン)

リンク要素に直接記述する方法

HTML

<a href="javascript:void(0)" onclick="window.open('index.html','_blank','width=500,height=500,scrollbars=1,location=0,menubar=0,toolbar=0,status=1,directories=0,resizable=1,left='+(window.screen.width-500)/2+',top='+(window.screen.height-500)/2);return false;" id="demo7">Demo7</a>
<input type="button" value="Demo8" onclick="window.open('index.html','_blank','width=500,height=500,scrollbars=1,location=0,menubar=0,toolbar=0,status=1,directories=0,resizable=1,left='+(window.screen.width-500)/2+',top='+(window.screen.height-500)/2);return false;" id="demo8">
<button onclick="window.open('index.html','_blank','width=500,height=500,scrollbars=1,location=0,menubar=0,toolbar=0,status=1,directories=0,resizable=1,left='+(window.screen.width-500)/2+',top='+(window.screen.height-500)/2);return false;" id="demo9">Demo9</button>
Result

Demo7

4. 新しいウィンドウを画面中央に開く

HTMLとは切り離して記述する方法。

HTML

<a href="javascript:void(0)" id="demo10">Demo10</a>
<input type="button" value="Demo11" id="demo11">
<button id="demo12">Demo12</button>
JavaScript

function openwindow4() {
demo10.onclick = function() {
window.open('index.html','_blank','width=500,height=500,scrollbars=1,location=0,menubar=0,toolbar=0,status=1,directories=0,resizable=1,left='+(window.screen.width-500)/2+',top='+(window.screen.height-500)/2);
return false;
}
demo11.onclick = function() {
window.open('index.html','_blank','width=500,height=500,scrollbars=1,location=0,menubar=0,toolbar=0,status=1,directories=0,resizable=1,left='+(window.screen.width-500)/2+',top='+(window.screen.height-500)/2);
return false;
}
demo12.onclick = function() {
window.open('index.html','_blank','width=500,height=500,scrollbars=1,location=0,menubar=0,toolbar=0,status=1,directories=0,resizable=1,left='+(window.screen.width-500)/2+',top='+(window.screen.height-500)/2);
return false;
}
}
if(window.addEventListener) {
window.addEventListener("load",openwindow4,false);
} else if(window.attachEvent) {
window.attachEvent("onload",openwindow4);
}
Result

Demo10


関連リンク

jQueryで新しいウィンドウを開く

  • カテゴリー:Labs