JavaScript

JavaScriptのwindow.openを使ってブラウザサイズ指定し別ウィンドウのページを開く方法

  /

JavaScriptのwindow.openを使ってブラウザサイズ指定し別ウィンドウのページを開く方法をご紹介します。
過去にモーダルでページ内にポップアップ表示させる方法「JavaScriptでモーダル表示する方法【プラグイン、jQuery不使用】」をご紹介しましたが、
今回はページ内では無くブラウザサイズ指定して別ウィンドウでページを開いてみます。

Contents
  1. ブラウザサイズ指定し別ウィンドウのページを開くCSS記述
  2. ブラウザサイズ指定し別ウィンドウのページを開くHTML記述
  3. window.openを使ってブラウザサイズ指定し別ウィンドウのページを開くJavaScript記述
  4. 【window.open】ブラウザサイズ指定して別ウィンドウのページを開くデモページ

ブラウザサイズ指定し別ウィンドウのページを開くCSS記述

※別ウィンドウを表示させるクリックボタン（.clk）のCSS記述です。ここは重要では無いので必要に応じて書き換えてください。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:26px;
  text-align:center;
  font-weight:normal;
  padding:10px 0 20px 0;
  line-height: 1.2em;
}
.clk{
  width: 200px;
  height: 50px;
  margin: 0 auto;
  background-color: #cccccc;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}
</style>

ブラウザサイズ指定し別ウィンドウのページを開くHTML記述

※別ウィンドウを表示させるクリックボタン（class=”clk”）を用意します。クリックボタンはonclickでwopn()関数を呼びます。

<h1>以下をクリックすると幅500px、高さ500pxのページが別ウィンドウで開きます。</h1>
<br>

<div class="clk" onclick="wopn()">ここをクリック</div>

window.openを使ってブラウザサイズ指定し別ウィンドウのページを開くJavaScript記述

※クリックすると幅500px、高さ500pxのページ（https://dad-union.com/）が別ウィンドウで開きます。「windowname」は任意のウィンドウ名を指定します。この名前がターゲット名になるので開いた別ウィンドウを操作したいときに指定する名前になります。

<script type="text/javascript">
function wopn() {
    window.open("https://dad-union.com/", "windowname", "width=500,height=500");
}
</script>

【window.open】ブラウザサイズ指定して別ウィンドウのページを開くデモページ

【window.open】ブラウザサイズ指定して別ウィンドウのページを開くデモ

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

別ウィンドウ window.open
RELATED POST