HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM writeln()メソッドの使い方を徹底解説！サンプルコード付き

HTML DOM の writeln() メソッドは、複数の式（HTML や JavaScript）をドキュメントに直接書き込むための機能を提供します。

注意： このメソッドは、ドキュメント内に既存の HTML コードがある場合、それを上書きします。また、渡された引数はそれぞれ新しい行に追加される点が特徴です。

構文

writeln() メソッドの基本的な構文は以下の通りです。

document.writeln(argument1, argument2, ...)

カンマで区切ることで、複数の引数（文字列や HTML 要素など）を一度に渡すことができます。各引数は改行されて出力されます。

writeln() と write() の違い

よく似たメソッドに write() がありますが、両者の違いは以下の通りです。

  • write()：引数をそのまま連結して出力する（改行なし）
  • writeln()：出力の末尾に改行文字を追加する

サンプルコード

ここでは、HTML DOM の writeln() メソッドを使った具体的な例を見てみましょう。このサンプルでは、新しいウィンドウを開き、入力されたユーザー名が「admin」以外の場合、子ウィンドウ側に「不正なユーザー」という警告メッセージを writeln() で書き込みます。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM writeln()</title>
<style>
    * {
        padding: 2px;
        margin:5px;
    }
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    input[type="button"] {
        border-radius: 10px;
</style>
</head>
<body>
    <form>
        <fieldset>
            <legend>HTML-DOM-writeln( )</legend>
            <input id="urlSelect" type="url" placeholder="Type URL here..."><br>
            <input id="textSelect" type="text" placeholder="Full Name"><br>
            <input type="button" value="Go To" onclick="openWindow()">
            <input type="button" value="Close" onclick="closeWindow()">
            <input type="button" value="Restore" onclick="restoreWindow()">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
    <script>
        var urlSelect = document.getElementById("urlSelect");
        var textSelect = document.getElementById("textSelect");
        var winSource;
        function openWindow() {
            browseWindow = window.open(urlSelect.value, "browseWindow", "width=400, height=200");
            winSource = urlSelect.value;
            browseWindow.opener.document.getElementById("divDisplay").textContent = "Child Window Active";
            if(textSelect.value !== 'admin')
                browseWindow.document.writeln("<p><strong>Unauthorized User:</strong></p>","<p>"+textSelect.value+"</p>");
        }
        function closeWindow(){
            if(browseWindow){
                browseWindow.close();
                browseWindow.opener.document.getElementById("divDisplay").textContent = "Child Window Closed";
            }
        }
        function restoreWindow(){
            if(browseWindow.closed){
                browseWindow = window.open(winSource, "browseWindow", "width=400, height=200");
                browseWindow.opener.document.getElementById("divDisplay").textContent = "Child Window Restored";
            }
        }
    </script>
</body>
</html>

コードのポイント

  • window.open() で指定した URL を新しい子ウィンドウとして開きます。
  • テキストボックスに入力された値が「admin」以外の場合、browseWindow.document.writeln() を使って、子ウィンドウのドキュメントに「Unauthorized User（不正なユーザー）」というメッセージとユーザー名を出力します。
  • 「Close」ボタンで子ウィンドウを閉じ、「Restore」ボタンで閉じたウィンドウを再び開くことができます。

実行結果

認可されていない氏名（admin 以外）を入力して「Go To」ボタンをクリックした場合：

HTML DOM writeln()メソッドの使い方を徹底解説！サンプルコード付き

認可された氏名（admin）を入力して「Go To」ボタンをクリックした場合：

HTML DOM writeln()メソッドの使い方を徹底解説！サンプルコード付き

まとめ

writeln() メソッドは、ドキュメントへの動的なコンテンツ出力を簡単に行える便利なメソッドです。ただし、既に読み込まれたドキュメントに対して呼び出すと内容が上書きされるため、使用するタイミングには注意が必要です。主にページの初期読み込み時や、新しく開いたウィンドウへの書き込みなどに活用するとよいでしょう。

  1. HTML DOM の fullscreenEnabled プロパティとは？使い方とサンプルコードを解説

    HTML DOM の fullscreenEnabled は、現在のドキュメントでフルスクリーンモードが利用可能かどうかを判定するためのプロパティです。戻り値の型は真偽値（boolean）で、読み取り専用となっています。フルスクリーンモードが利用可能な場合は true を返し、利用できない場合は false を返します。なお、ブラウザによって実装が異なるため、動作させるには各ブラウザに対応したベンダープレフィックスを使い分ける必要があります。構文（シンタックス）fullscreenEnabled の基本的な構文は以下の通りです。document.fullscreenEnabledサンプルコード

  2. HTML DOM write()メソッドとは?構文と使い方を実例で解説

    HTML DOM の write() メソッドは、HTML や JavaScript などの複数の式をドキュメントに直接書き出すための機能です。ページの読み込み時に動的にコンテンツを生成したり、別ウィンドウへメッセージを出力したりする場面で活用されます。注意: このメソッドには重要な特徴が2つあります。ひとつは、ドキュメント内にすでに HTML コードが存在する場合、それを上書きしてしまうという点。もうひとつは、引数を渡しても自動的には改行されず、そのまま連結されるという点です。用途によっては意図しない表示になることがあるため、挙動を理解した上で使うことが大切です。構文write() メソッド