ブログでもだいたい使えるHTMLタグリファレンス

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

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

ウィンドウ名=window.open( '表示させるページのURL' , '_blank' , 'オプション値' )

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

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

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

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

<html>
<head>
<title>タイトルを記述</title>

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

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

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

ブログでもだいたい使えるHTMLタグ リファレンス