htmlドキュメントをインラインでネストする

Question

私は、別のhtmlドキュメント内でhtmlドキュメントを作成して、その中にhtmlドキュメントをインラインでレンダリングできる場所を設定したいと考えています。私は、共通の引数が、これが行われるだろうものではありませんが、私はそれをやりたいと思っための2つの理由があります知っている：

1. 私は私が管理していた物理ファイルの数を削減したいです、 iframeやレンダリングパーシャルは、実際に別のドキュメントをレンダリングする必要があるため、正確には私の後ろではありません。

2. 私はいくつかのhtmlの例を表示することができますし、画像を使わずに同じページにブラウザのように見えるものを表示するhtmlドキュメントをロードしたいと思います。

は、私は、これはいくつかのオンラインHTMLエディタを使用すると、その後側にオフHTMLを生成、HTMLを書くことができますよう、可能である知っている、と私はこれがちょうど動的にその中にファイルを再書き込みパーシャルことができたとし部分的ですが、確かにそれらのすべてがこれをやっているわけではないので、これを達成するためにiframeや部分的な方法を使う以外に方法がありますか？私はC＃でasp.net mvcを使用しています。

Answer 1

オンラインエディタは、HTMLコードをプレビューコンテナとして動作するはずの別のコンテナ内の子要素としてエディタに挿入することで、HTMLをレンダリングします。

HTMLスニペット（あらかじめロードされている場合はDBに格納されている部分）だけを格納する以外に、サーバー側のアクティビティはありません。

これは、純粋なクライアント側のアクティビティとして実行できます。もちろん、ユーザーが渡したコードの内容を解析するカスタムレンダラーを作成する必要があります。 はHTMLタグを取り除き、スクリプトやその他の参照をheadタグにロードし、headタグで指定されたとおりにタイトルを設定しますbodyタグの内容をプレゼンテーションdivに追加します。

しかし、これは面倒です。 HTMLをDB /アプリケーションキャッシュに格納してiframe経由でレンダリングする方が良いので、部分的な読み込みを処理する必要はありません。ちょうどCRUD。 /================================ ========================= 更新：解明への応答

はい、可能です。あなたの「main-html」文書内に「javascriptテンプレート文字列変数」として「inner-html」を埋め込みます。 このようないくつかの事：

<script type="text/javascript"> // <![CDATA[ 
      var innerhtml1 = ` 
          <div> 
           <p>This markup is part of innerhtml1</p> 
          </div> 
          `; 
      // ]]> 
    </script> 

（私はあなたがが、テンプレートリテラルのものを使用したい場合は、CDATAセクションを本当に必要ですかはわからない。）

次に、あなただけの実行可能性「メイン-HTML」ドキュメントと上

$("#container1").html(innerhtml1);

あなただけのHTMLと体のタグを持っていないことを確認してください。しかし、あなたが（上記のように）表示したいもののための十分なマークアップ。

実際にHTMLとbodyタグがある場合は、ソース文字列のbodyタグの内容を取り出してプレビューコンテナに挿入する方法を見つける必要があります。この文字列を渡すのは簡単ですタグとタグの間の正規表現とスクープのもの。 しかし、私はあなたがこれを必要としないかもしれないと確信しています。

この方法で、あなたのhtmlページ内にHTMLドキュメントのトン（冗談）を仮想的に保存できます。ここ

Codepenリンク： http://codepen.io/anon/pen/dOJMwo?editors=1010#0

テンプレートリテラルのことをサポートしているブラウザでのみ動作を注意してください（今のように、そのかなり良いここを参照してください：。EcmaScript6 template strings supportを）。 そうでなければ、あなたはまだ標準の文字列を使用することができますが、エスケープやその他の処理を使用して適切にフォーマットする必要があります。