menu
menu

JavaScriptで新しいウィンドウを開く | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook11
  • はてなブックマーク6
  • Google+5
  • Pocket0
  • Twitter0

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. 新しいウィンドウを開く(インライン)

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

サンプルデモ

Demo1

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>

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

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

サンプルデモ

Demo4

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);
}

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

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

サンプルデモ

Demo7

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>

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

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

サンプルデモ

Demo10

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);
}

関連リンク

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

  • カテゴリー:Labs
  • facebook11
  • はてなブックマーク6
  • Google+5
  • Pocket0
  • Twitter0