4

#includeHTML は、ディレクティブを使用して C を取得するなど、他の HTML のクライアント側のインクルードをサポートしていません。代わりに、クライアント側の HTML を含めるための主要なツールはiframe、、、object特に jQuery の.load. 例については、このスレッドを参照してください。

残念ながら、これらのメソッドのいずれも、 #include. 特に、含まれるコンテンツをそれぞれのタグでラップしますiframe。objectまた、サンプル スレッドで提案されている jQuery ソリューションでも、余分なdiv.

たとえば、スレッドの jQuery ソリューションを考えてみます。

a.html:

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("b.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

b.html:

<p> This is my include file </p>

これにより、body 部分が次のような DOM が作成されます。

<body> 
  <div id="includedContent">
    <p> This is my include file </p>
  </div>
</body>

しかし、 true#includeにはラッピングが含まれないdivため、DOM は次のようになります。

<body> 
  <p> This is my include file </p>
</body>

ラッパータグなしでクライアント側のインクルードを行う方法はありますか?

編集: 周囲のタグの知識を想定したくありません。たとえば、この場合、周囲のタグは ですbodyが、すべての場合ではありません。

4

6 に答える 6

1

あなたの例では、jQuery を使用してコンテンツをロードする前に、DOM でラッパー要素を既に定義しています。

<body> 
  <div id="includedContent"></div>
</body>

jQuery を使用している場合は.load()、コンテンツの移動先を指定します。使えない理由がない

$("body").load("b.html");

どちらがあなたに与えるでしょう

<body> 
  <p> This is my include file </p>
</body>
于 2013-09-20T03:57:42.717 に答える
0

他の回答のアイデアを組み合わせる：

$(function(){
    $("[data-include]").each(function(){
        var that = $(this);
        that.load(that.attr('data-include'), function(){
            that.contents().unwrap();
        }); 
    });
});

他の言語と同様の構文で簡単にインポートできるようになりました。

<div data-include="includes/topmenu.html"></div>
于 2014-06-20T23:05:11.573 に答える