日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2015年4月13日月曜日

ブログ/Webページの一部を新しいウィンドウで表示したい! そんな時は、JavaScriptを使って新しいウィンドウへHTMLを書き出そう!

イントロダクション

ブログ上では、レイアウトが決まっているため、大きなサイズのコンテンツは扱いづらいです。


特に、横幅はたいてい固定されているうえに、サイドバーなどがあるため、大きなコンテンツは縮小して配置するか、狭い領域に配置する工夫が必要になります。

コンテンツのなかでも、特に表のような幅が広いコンテンツは、配置するのが面倒です。


Webページでも、本文とその他の部分でコンテンツのサイズが固定されている場合には、大きなサイズのコンテンツは扱いづらいです。


そんな時は、ブログの本文中では、収まらなかった部分をスクロールで見せるようにしておき、新しいウィンドウでそのコンテンツ全体を見せる方法があります。


本文中のコンテンツを新しいウィンドウで表示する JavaScript コード

JavaScript コード

<div id="new_window_src" style="overflow-x:scroll;">

<!-- コンテンツ ここから -->

<table>
<tr>
<td>
<b>これはテストの表です。! </b><br />
</td>
<td>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
</tr>
</table>

<!-- コンテンツ ここまで -->

</div>

<input type="button" value="新しいウィンドウで開く" onclick="openNewWindow(document.getElementById('new_window_src').innerHTML, 'new window')"/><br />

<script type="text/javascript">
<!--
    /*
    新しいウィンドウを開き、指定された HTML を出力する

    html : 出力する HTML データ
    title : タイトル
    */
    function openNewWindow(html, title) {

        // 新しいウィンドウを開く
        var win = window.open();

        // 書き込み開始
        win.document.open();

        win.document.write("<html><head><title>" + title + "</title></head><body>" +
            html +
            "</body></html>");

        // 書き込み終了
        win.document.close();
    }

//-->
</script>


実行結果


これはテストの表です。! aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa



解説

<div id="new_window_src" style="overflow-x:scroll;"></div> 内に記載されたコンテンツを、そのまま新しいウィンドウで開きます。

その div タグの style 属性に overflow-x:scroll; が指定されているため、ブログ本文中では本文の幅よりも大きなコンテンツはスクロールして全体を確認することになります。



そして、ボタンをクリックすると、openNewWindow 関数が呼び出され、引数に指定された HTML コードと、タイトルを用いて、新しいウィンドウで新しいHTMLドキュメントを作成します。


なお、一つの本文中に 2 つ以上このコードを配置したい場合には、id 属性値"new_window_src" をそれぞれ別物にする必要があります。(script タグの部分は 1 つだけあれば問題ありません。)

例)new_window_src1, new_window_src2 など。


その時に、以下の 2 つの値が同じ値となる(対応する)ようにする必要があります。

  • div タグの id 属性 の new_window_src
  • input タグの onclick 内の new_window_src


まとめ

このように、新しいウィンドウにコンテンツを出力することで、Webページやブログなどといった媒体の本文の幅などに制約されずに、巨大なコンテンツを見やすく設置することが可能になります。

唯一問題となるのは、Webページ自体を印刷するなどして、巨大なコンテンツのスクロール機能や新しいウィンドウで表示機能が働かなくなる状態でしょうか。

この仕組みをうまく活用して、使いやすいブログ/Webページのコンテンツを作りたいものですね。








関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...
Related Posts Plugin for WordPress, Blogger...