新しいページを別ウィンドウでサイズ指定して開く

0

    印刷用ページなどを別ウィンドウで小さく表示したいときありますよね。

    そんなときに使うのがopenwinというjavascriptです。
    これはjavascriptをぜんぜん知らない人でも使えます。


    1ページに1つだけのとき

    1ページにリンクがひとつしかない時は下記のコードを使います。

    head内
    <script type="text/javascript">
    <!--
    function openwin() {
    window.open("./window.html", "new", "width=500,height=400");
    }
    // -->
    </script>
    

    body内
    <a href="javascript:openwin();">新しいウィンドウ</a>
    

    head内は、window.open("別ウィンドウのURL", "ウィンドウの名前(任意)", "横幅,高さ")になります。
    ウィンドウの名前はあってもなくてもいいんですが、ある場合は、無駄にたくさん別ウィンドウが開かれないうんたらかんたらで、ウィンドウのアクセスに使われるみたいです。


    1ページにリンクがいっぱいあるとき

    1ページにリンクがいっぱいあるときは下記のコードを使います。

    head内
    <script type="text/javascript">
    <!--
    function openwin(url, w, h) {
    window.open(url, "", "width=" + w + ",height=" + h);
    }
    // -->
    </script>
    

    body内
    <a href="./window.html" onclick="window.open
    ('./window.html', '', 'width=650,height=700); return false;">650x700</a>
    <a href="./window.html" onclick="window.open
    ('./window.html', '', 'width=800,height=600); return false;">800x600</a>
    <a href="./window.html" onclick="window.open
    ('./window.html', '', 'width=400,height=200); return false;">400x200</a>

    head内は、そのままコピペして使って問題ありません。
    body内は、いろいろ記述方法があるんですが、上記の方法がie6でも問題なく使えたし、このあとにも書きますが、プロパティを加える時にも使いやすいです。
    選択肢が増えても混乱するだけなので、わからない人はこれで問題が起きたときに考えればいいと思います。


    プロパティを加えるとき

    この他にも、スクロールバーを加えたり、ツールバー・メニューバーの有無などを設定できます。

    複数のプロパティを指定する時は「,」で区切って「''」の間にプロパティを書きます。

    記述例
    window.open("./window.html", "", "width=500,height=400,status=yes,scrollbars=yes");

    こんな感じで記述すれば大丈夫です。
    プロパティの種類や詳しい書き方はググればいっぱい出てくるので省略します。


    まとめ

    javascriptがわからなくても、ちょっといじれば便利に使えるものはたくさんあるので、わからないとあきらめずにバンバン使っていくべきだと思います


    ++++++++++++++++++++++++++++++++++++++++++++++++++

    有限会社アンブレラ STUDIO TEMPO
    〒530-0056 大阪市北区兎我野町5-6 栄ビル201
    TEL/FAX:06-6367-4413/06-6367-4414

    ++++++++++++++++++++++++++++++++++++++++++++++++++
           
    コメント
    コメントする








       
    この記事のトラックバックURL
    トラックバック

    カレンダー

    S M T W T F S
        123
    45678910
    11121314151617
    18192021222324
    252627282930 
    << November 2018 >>

    エントリー

    カテゴリー

    アーカイブ

    recent comment

    リンク

    プロフィール

    検索

    その他

    モバイル

    qrcode