ITコラム

colmun_main8584

JavaScript

2017.12.22

JavaScript【 サンプル 】6 ~ ウィンドウの開閉と生成方法

JavaScript の記述方法のサンプルを挙げてみます。
今回は、新しいウィンドウを開いたり閉じたりする際の記述と ウィンドウの生成方法についてのサンプルを紹介します。

目次

 
1.ウィンドウを開く
2.ウィンドウを生成する
3.ウィンドウを閉じる

1.ウィンドウを開く

 
新しいウィンドウを開きます。
開くボタンをクリックしてみて下さい。

 
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">
<!--
function winOpen() {

    window.open("https://programmercollege.jp/","","width='50%',height='90%'");
}
//-->
</script>

<div style="background-color : #CCC;">
    <input type="button" value="開く" onClick="winOpen()">
</div>

 
「 window.open(“”, “”, “”); 」で新しいウィンドウを開くことができます。

第 1 引数には、新しく開いたウィンドウに表示するページの URL を指定します。

第 2 引数には、ウィンドウ名を指定することができます。
特に必要がなければ指定無しでOKです。

第 3 引数には、ウィンドウの特徴を設定するオプションを指定することができます。
この指定は 複数のパラメーターをカンマ区切りで指定するため、引用符(「 ” 」と「 ‘ 」)の使い分けに注意が必要です。
オプション指定を省略すると、ブラウザの新規ウィンドウと同じ仕様で開きます。

上のサンプルでは、第 3 引数でウィンドウの横幅と高さを指定していますが、ここで指定可能なパラメータのうち主要なものは次の通りです。

パラメーター 意味
width 数値 ウィンドウ幅
height 数値 ウィンドウ高さ
left 数値 ウィンドウ位置左
top 数値 ウィンドウ位置上
menubar yes/no メニューバー有無
toolbar yes/no ツールバー有無
location yes/no アドレスバー有無
status yes/no ステータスバー有無
resizable yes/no リサイズ可否
scrollbars yes/no スクロールバー有無

▲目次へ戻る

 

2.ウィンドウを生成する

 
既存のWebページではなく、プログラムの中でWebページを作成して表示することもできます。
タイトルと本文を入力して 生成ボタンをクリックしてみて下さい。

タイトル : 

本文   : 

 

 
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">
<!--
function winCreate() {

    var newWin, wkWin;
    var dat1 = document.getElementById("dat1").value;
    var dat2 = document.getElementById("dat2").value;

    //ウィンドウを開く
    wkWin = window.open("","","width='50%',height='90%'");

    //ウィンドウ移動
    wkWin.focus();

    //ドキュメントを開く
    wkWin.document.open();

    //ドキュメントクリア
    wkWin.document.clear();

    //ドキュメントに文字列を出力
    newWin = "<html><head><title>"
             + dat1
             + "</title></head><body>"
             + dat2
             + "</body></html>";
    wkWin.document.write(newWin);

    //ドキュメントを閉じる
    wkWin.document.close();
}
//-->
</script>

<div style="background-color : #CCC;">
    <div style="display:inline-flex;">
        タイトル : <input type="text" id="dat1">
    </div>
    <div style="display:inline-flex;">
        本文   : <input type="text" id="dat2">
    </div>
    <input type="button" value="生成" onClick="winCreate()">
</div>

 
動的に作成した内容を 別のウィンドウに表示したい場合、ファイルを用意して中身を書き換える方法もありますが、上のサンプルのように 1 から作ることもできます。

新しいウィンドウの内容を作成する際には( 上のサンプルの「 newWin = “ ・・・ ”; 」の部分 )、変数など文字列以外に引用符(「 ” 」や「 ‘ 」)を付けないように注意して下さい。

▲目次へ戻る

 

3.ウィンドウを閉じる

 
ウィンドウを閉じるボタンを作成します。
現在のページが閉じられないように、新しく開いたウィンドウに閉じるボタンを設置します。
開くボタンをクリックして新しくウィンドウを開いた後、閉じるボタンをクリックしてみて下さい。

 
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">
<!--
function winClose() {

    var newWin, wkWin;

    //ウィンドウを開く
    wkWin = window.open("","","width='50%',height='90%'");

    //ウィンドウ移動
    wkWin.focus();

    //ドキュメントを開く
    wkWin.document.open();

    //ドキュメントクリア
    wkWin.document.clear();

    //ドキュメントに文字列を出力
    newWin = "<html><head><title>ウィンドウを閉じるサンプルページ</title></head>"
             + "<body>閉じるボタンをクリックして下さい!"
             + "<input type='button' value='閉じる' onClick='window.close()'>"
             + "</body></html>";
    wkWin.document.write(newWin);

    //ドキュメントを閉じる
    wkWin.document.close();
}
//-->
</script>

<div style="background-color : #CCC;">
    <input type="button" value="開く" onClick="winClose()">
</div>

 
「 window.close(); 」で 現在開いているウィンドウを閉じることができます。

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.