その場でHTMLドキュメントを作成する3つの方法

HTML文書をその場で作成する, JavaScriptの有無にかかわらず、時には必要です。確認ページまたはページ全体を含むiframeを表示することが目的であるかどうか。文書が非常に単純であれば、簡単に表示できます。 データURLまたはJavaScriptのいずれかを組み合わせて配信する.

しかし、あなたはそれについてどう思いますか？ JavaScriptを使ってHTMLをドキュメントに追加する方法はすでに知っていると思いますが、 HTML文書全体を作成する? 私が以下に示すいくつかの方法に興味があるかもしれません。そのうちの最初のものはJavaScriptさえ必要としません。!

新しく作成したすべての文書を表示します iframe内 あなたはそれらがレンダリングされるのを見ることができるように。しかし、あなたは適切だと思うけれどもあなたは文書を使うことができます。例えば、 データベースに保存 または Webサービスを介して送信される 他の場所にレンダリングされる.

1.データURL

データURL にシンプルで効果的な方法を提供します Webページにドキュメントを配信する. あなたがそれに慣れていないならば、彼らがどのように働くかに関する我々の前の記事を読んで.

基本的に、データURL で始まる データ： URLスキーム. それは続きます 提供されるコンテンツ, その前にあなたは任意に言及することができます メディアタイプ そしてその コンテンツのエンコーディング.

画像がこのように配信されるのを見たことがあるかもしれません。 base64文字 メディアタイプに続いて、データURLのコンテンツとして指定されます。.

上記のコードはノートパソコンの絵文字で男のPNG画像を表示します - あなたはあなたのブラウザでそれをチェックすることができます.

これがどのように行われるかに似て, データURLはHTMLドキュメントも提供できます：

iframe HTMLドキュメントをレンダリングします。 を含むデータURLを使用して追加された text / html メディアタイプ＆とそれに続くHTMLコード.

このテクニックがどのように機能するのかを知りたい場合は、追加のHTMLを追加して以下のCodepenデモを編集できます。.

CodePenのHONGKIAT（@hkdc）によるData URLを使用したHTMLドキュメントの作成を参照してください。.

2. DOMImplementationインターフェース

DOMの実装 できるインタフェースです。 新しい文書を作成する どちらかを使う createDocument（） （XMLの場合）または createHTMLDocument（） 方法 - あなたが必要とする方。インターフェースは、 document.implementation 物.

の createHTMLDocument（） 方法 1つのオプションパラメータを取ります どれが 新しい文書のタイトル.

あなたはできる 新しく作成した文書にHTMLを追加する 通常の方法と同じです。 append（）, appendChild（）, と他のDOM関連のJavaScriptメソッド.

 window.onload =（）=> var doc = document.implementation.createHTMLDocument（）; doc.body.append（ 'Hello World！'）; var iframeDoc = document.querySelector（ 'iframe'）。contentDocument; iframeDoc.replaceChild（doc.documentElement、iframeDoc.documentElement）;

上記のコードでは、 新しいHTML文書が作成されました を使用して createHTMLDocument（） の方法 DOMの実装 インターフェースとこんにちは世界! 文字列は body要素に追加.

それから、新しく作成された文書がレンダリングされたときにどのように見えるかを見るために、私はiframeの文書要素を置き換えました。iframeDoc.documentElement）新しい文書の文書要素（）doc.documentElementを使用して replaceChild（） 方法。このように 見ることができるこんにちは世界! ひも 作成してiframeに追加したドキュメントから.

CodePenのHONGKIAT（@hkdc）によるDOMImplementationインターフェイスを使用した新しいHTMLドキュメントの作成を参照してください。.

3. DOMParser API

その名前が示すように、 DOMParser API HTML / XML文字列をDOM文書に解析します.

新しい DOMParser オブジェクトインスタンス そのコンストラクタを使用して作成することができます, DOMParser（）. インスタンスは以下のメソッドを持ちます。 parseFromString（） それ 2つの引数を取った後に構文解析を行います：解析する文字列と作成する文書の文書型.

 window.onload =（）=> var parser = new DOMParser（）; var doc = parser.parseFromString（ 'こんにちは世界! '、 "text / html"）; doc.body.append（ 'extra text'）; var iframeDoc = document.querySelector（ 'iframe'）。contentDocument; iframeDoc.replaceChild（doc.documentElement、iframeDoc.documentElement）;

上記のコードでは、新しい DOMParser 実例 HTML文字列をDOMドキュメントに解析します を使用して parseFromString（） 方法.

次に、前のコードスニペットと同じ方法で、新しく作成されたドキュメントのdocument要素 iframeのdocument要素を置き換えます. その結果、作成したドキュメントのHTMLコードがiframeに表示されるようになります。.

CodePenのHONGKIAT（@hkdc）によるDOMParser APIを使用した新しいHTMLドキュメントの作成.