TOPページ >  ウィンドウを開く、閉じる、制御する > ポップアップウィンドウを開く

ポップアップウィンドウを開く

ホームページやブログなどのウェブサイトで JavaScript の window.open() を使って、ポップアップウィンドウを開くことができます。

ポップアップウィンドウを開くために使用する JavaScrip のメソッドは、次のようになります。

ウィンドウ名=window.open( '表示させるページのURL' , '_blank' , 'オプション値' )
  1. ウィンドウ名:省略可能ですが、親ウィンドウから表示内容を操作したい場合は、指定しておく必要があります。
  2. 表示させるページのURL:ポップアップで開いたウィンドウに表示させるページのURLを指定します。
  3. オプション値:表示位置や、ウィンドウのサイズ、メニューバーやスクロールバーの有無などいろいろの指定ができます。詳細は、別ページで紹介していますので参考にしてください。→window.open() のスタイル指定一覧

サンプルページです。下記リンクをクリックすると、『ポップアップテスト画面』 というウィンドウが開きますが、一緒に ポップアップウィンドウとして、『ポップアップ画面』 というウィンドウが開きます。
※ブラウザのセキュリティの設定で ポップアップをブロックしている場合は、ポップアップを許可してご覧ください。

上記サンプルページのソースは次のようになります。(ポップアップウィンドウを開く操作にかかわらない部分は、簡略化していますのでご了承ください。)

JavaScript のスクリプト部分(<script>~</script>)は通常のウェブサイト(ホームページ)なら、下記のように親ウィンドウの<head>~</head> 間に記述します。

<html>
<head>
<title>タイトルを記述</title>
<script type="text/javascript">
<!--
window.open('http://html.appelle.jp/sample/popup.html', '_blank', 'width=300,height=200,menubar=no,toolbar=no');
// -->
</script>
</head>
<body>ページ内容を記述</body>
</html>

ブログでも、テンプレートの編集画面で 同じように<head>~</head> 間にJavaScript 部分のソースを挿入すれば、そのブログが開かれたときに、同時にポップアップウィンドウを開くことができます。

また、記事の投稿欄に、JavaScript 部分をそのまま記述すると、その記事が表示されたときに、ポップアップウィンドウを開くことができます。ただし、これはイレギュラーな記述となるため、ブログの提供元によってはエラーとなります。

※ブラウザのセキュリティの設定でポップアップをブロックしているユーザーはわりと多いので、ご自分のサイトにポップアップを設置する際にも、あまり期待しないほうがいいかもしれません。

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
一定時間後に自動でウィンドウを閉じる
ウィンドウをスクロールさせて表示する
確認メッセージを表示する
警告メッセージを表示する
ウィンドウのステータスバーに文字列を表示する
JavaScriptを使って別ウィンドウの表示内容を操作する
window.open() のスタイル指定一覧
ウィンドウのサイズ変更を禁止する
ウィンドウの位置や大きさを指定する
ポップアップウィンドウを開く
メニューバーやスクロールバーの有無を指定する
大きさを指定してウィンドウを開く
ウィンドウを閉じる
ウィンドウを開く
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス