【JavaScript】新しいウィンドウでページを出力する方法

スポンサーリンク

JavaScriptで新しくウィンドウを作って、そこにページを表示する機会があり、勉強がてら調べましたので、備忘として載せたいと思います。

新しくウィンドウを作るにはwindow.open()

新しくウィンドウを作って表示するにはwindow.open()ファンクションを使います。
といっても使い方はとっても簡単です。

調べてみたのでご紹介します。

準備

別ウィンドウを出力するきっかけであるボタンを表示する用HTMLと新規ウィンドウで開くHTMLの2つを用意しました。

引数としては下記のものが用意されているので、オプションの箇所に大きさ等の設定を書いていきます。

window.open('新規ウィンドウで表示したいHTMLファイル','新規ウィンドウの名前','オプション');

ボタン用(index.html)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>テスト</title>
    <script
            src="https://code.jquery.com/jquery-3.4.0.min.js"
            integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
            crossorigin="anonymous"></script>
    <script>
        $(function () {
            // ボタンを押したら処理される
            $('#open_window_button').on('click',function () {
                // 新規ウィンドウを表示する
                window.open(
                'new_page.html', // 表示内容
                '_blank', // 名前つけない
                'top=0, left=0, width=836, height=700' // 設定情報
                );
            });
        });
    </script>
</head>
<body>
<div class="button_row">
    <button id="open_window_button">別ウィンドウで表示</button>
</div>
</body>
</html>

※上記ファイルはjQueryを利用しています。

新規ウィンドウで表示する用HTML(new_page.html)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>テスト</title>
    <style>
        .top_row{
            display: flex;
           justify-content: space-around;
        }
        .bottom_row{
            display: flex;
            justify-content: center;
        }
        div>div{
            width: 100px;
            height: 100px;
        }
        #left_box{
            background-color: #69A2B0;
        }
        #right_box{
            background-color: #E05263;
        }
        #center_box{
            background-color: #659157;
        }
    </style>
</head>
<body>
<div class="top_row">
    <div id="left_box">

    </div>
    <div id="right_box">

    </div>
</div>
<div class="bottom_row">
    <div id="center_box">

    </div>
</div>
</body>
</html>

HTMLファイルを別ウィンドウで表示する

index.htmlにてスクリプトタグの中に記述しているのですが、新しいウィンドウでページを開くには

オプションの箇所に高さと幅を書かないといけません。

これがないと別タブで開いてしまいます。

動きました。

今回はオプションの箇所に下記文字列を入れました。

'top=0, left=0, width=836, height=700' // 設定情報

top : ウィンドウを表示する位置(左上から縦方向にどれくらいか)
left : ウィンドウを表示する位置(左上から横方向にどれくらいか)
width : ウィンドウの大きさ(横方向にどれくらいか)
height : ウィンドウの大きさ(縦方向にどれくらいか)

ほかにもいろいろな設定ができるので試してみてください。

詳細はこちらにあります。

Window.open()
Window インターフェイスの open() メソッドは、指定されたリソースを、新しい、または既存の指定された名前を持った閲覧コンテキスト (ウィンドウ、 iframe、タブ) に読み込みます。その名前が存在しない場合は、新しい閲覧コンテキストが新しいタブまたは新しいウィンドウに開かれ、指定されたリソースがそこに読み...

参考サイト

【JavaScript入門】window.open()で新規タブやウィンドウを開く方法! | 侍エンジニア塾ブログ(Samurai Blog) - プログラミング入門者向けサイト
今回は、JavaScriptで新しいタブやウィンドウを開くことができる「window.open()」について学習をしていきましょう! 新しいウィンドウを開く方法が知りたい window.open()のオプション設定やカスタマイズがしたい 新規タブと新規ウィンドウの違いが知りたい このような内容も含めて、本記事では以下の...
タイトルとURLをコピーしました