menu
menu

キーワード検索

 

12月更新・前月(11月)の人気記事トップ10 - 12/02/2019

  1. ( 1 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  2. ( 5 ↑) 【Mac】Finderにフォルダのフルパスを表示させる方法
  3. ( 2 ↓) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  4. ( 3 ↓) 【CSS】CSSだけでドロップダウンメニュー
  5. (圏外↑) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  6. ( 4 ↓) 【Mac】外付けメディアが取り外せなくなったらSpotlightの除外項目を設定してみる
  7. (圏外↑) 【Google】Googleアカウントのメールアドレスを変更する方法
  8. (圏外↑) 【Mac】MacにGoogle Driveをインストール
  9. (圏外↑) 【Suica】iPhoneでSuicaをクレジットカード無しで使う方法
  10. ( 7 ↓) 【jQuery】入門2. jQueryをHTMLに組み込む
このエントリーをはてなブックマークに追加

【jQuery】入門7. jQueryで新しいWindowを開く

【jQuery】入門7. jQueryで新しいWindowを開く

こんにちは(・∀・)

今回はjQueryで新しくウィンドウを開く方法についてご紹介します。jQuery関数にwindow.open()メソッドで新しいWindowを開きます。

ポップアップウィンドウを無効にしている場合正しく動作しません。

Contents

  1. 新しいWindowを開く際の設定
  2. 新しいウィンドウを開く
  3. 新しいウィンドウを画面中央に開く

新しいWindowを開く際の設定

window.open()メソッドを使用して新しいWindowを開く設定をします。


$(function() {
$(".demo1").click(function(){
window.open(①url,②name,③詳細);
④return false;
});
});
  1. urlを記述
  2. 名前を記述(_blankや_selfなどのターゲット属性値かウィンドウ名を指定)
  3. 新しいWindowを開く際に表示するスタイルを指定(カンマで区切って複数指定できます)
  4. a要素に直接記述する場合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

<button id="demo1">Demo1</button>
JavaScript

$(function() {
$("#demo1").click(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;
});
});
Result
2. 新しいウィンドウを画面中央に開く

画面中央に新しいウィンドウを開く方法

HTML

<button id="demo2">Demo2</button>
JavaScript

$(function() {
$('#demo2').click(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;
});
});
Result

window.open()メソッドのパラメータで表示させたいWindowの詳細を調整します。

 

いかがでしたでしょうか、新しいWindowを開くjQuery、これも特に難しいところはなかったと思います。Native JavaScriptでできることもjQuery化で練習してドンドンjQueryに慣れていきましょう。


関連リンク

JavaScript入門
jQuery入門

  • JavaScript jQuery window.open()メソッド
このエントリーをはてなブックマークに追加