web-dev-qa-db-ja.com

HTML5にローカルHTMLをドキュメントにロードする方法が含まれていないのはなぜですか？

私は最近これについてたくさん考えています。なぜHTML5 本当にではないを使用してドキュメントにHTMLをロードし、HTMLファイルを分割できるのですか？

ほぼ他のすべてのアセット（画像、ビデオ、オーディオ）をサポートしています。

はい、iframes、embeds、およびobjectsがありますが、サンドボックス化されており、ドキュメントの残りのフローには従いません。

私は次のようなことを考えていました：

<h2>My wonderful application</h2>

<include src = "leftPane.html" type = "text/html" />

<include src = "main.html" type = "text/html" />

<include src = "footer.html" type = "text/html" />

これを誰かに説明して欲しい。私たちが作成するほぼすべてのWebアプリケーションでは、何らかの形式のテンプレートを使用してHTMLを分割しているのに、なぜHTML5はそれを含まないのでしょうか。

（フレームレス）のご意見をいただければ幸いです。

マット

htmlincludelanguage-features
29
Matt

結局のところ、これはWHATWGのメーリングリストで公開されています。 クライアント側インクルードの提案 ：シャノンがあなたの言っていることを正確に提案し、パーサーはドキュメントフラグメントの読み込み中にブロックする必要があります。待ち時間コストが高すぎるため、Ian Hicksonはこれを拒否しました。さらに、これは多くのWebサーバーがすでに提供しているシンプルな機能であるため、コストに見合う価値がないと見なされていました。

代わりに、_ seamlessiframe の属性を使用して調査することをお勧めします。これにより、ドキュメント全体がドキュメント内に配置されますが、ブロック要素のように機能します（スタイルを継承します）ホスト文書から）。まだ多くのブラウザでサポートされているとは思いません。

20
yonran

同様の質問が行われ、それが可能である： HTML5インクルードファイル

ラファの答え：

object タグを使用します。

<object name="foo" type="text/html" data="foo.inc"/>

foo.incには有効なHTMLを含める必要があります。

Konqueror、Firefox、Chromiumでテストしました。

もしそれが役に立つと私が思うなら、「可能ではない」が病気のように広まっているので、Rafaの回答（私のものではない）に賛成投票してください。

4
greenoldman

いいえ、リクエストごとにサーバーへのラウンドトリップは必要ありません。テンプレートのコンテンツが一定でない場合は、キャッシュすることができ、転送するデータを減らすことができます。これが、CSSとJavaScriptを別々のファイルに入れる理由です。

4
Peter

HTML5は、HTML、CSS、JavaScriptの3つのコンポーネントで構成されています。したがって、HTML5を利用するには、これらすべてを使用する必要があります。

JavaScriptを使用して、外部HTMLコードを別のHTMLドキュメントに含めることができます。唯一のことは、外部コードを.jsファイルに保存する必要があることです。 HTML段落を含める方法の例を次に示します。

<!DOCTYPE html>
<html>
    <head>
    <title>Main Page</title>
        <script type="text/javascript" src="include_html.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            paragraph();
        </script>
    </body>
</html>

Include_html.jsの内容

function paragraph()
{
        document.write("<p> This is an HTML paragraph </p>");
}
3
Goa

もちろん、リクエストごとにサーバーへの往復が必要になります。これが原因で発生する可能性がある帯域幅の問題を想像できますか？上記のスニペット（元のページ+ 3を含む）だけで4つのリクエストがあり、その後、ブラウザーのレンダリングの問題とローカルのJSの問題（つまり、DOMが読み込まれるのはどの時点ですか？4つのDOMがありますか？）.

2
Barry Kaye

別の方法は、jQueryとタグを使用することです

http://irtazaali.wordpress.com/2013/01/16/how-to-include-html-text-from-another-file-into-an-html5-page/

2
irtaza

まだ正式ではありませんが、Webコンポーネント、つまりあなたが説明したのと同じようにインポートを可能にする新しい概念が近い将来にHTML仕様に追加されるようです。それはあなたが要求したとおりには動作しません-バリー・ケイがこれがいくつかの問題を引き起こすであろうと指摘したように-代わりにそれはこの考えを取り、問題に対処します。

ここで、コンセプトに関する現在の草案を見ることができます： http://w3c.github.io/webcomponents/spec/imports/

そして、私はこの記事を理解しやすいかもしれないことも発見しました（私にとってはそうでした） http://www.html5rocks.com/en/tutorials/webcomponents/imports/

私はこれがほとんど理論的な反応であることを知っていますが、それは一種の理論的な質問でもありました;）.

0
Alex Johnson