web-dev-qa-db-ja.com

別のhtmlファイルにhtmlを含める

私は自分のサイトの他のすべてのhtmlファイルに含めたいhtml "head"テンプレートとナビゲーションテンプレートを持っています。私はこの投稿を見つけました：

HTMLファイルに別のHTMLファイルを含める

そして私の質問は...それが私が含めたいヘッダーである場合はどうなりますか？

たとえば、次のファイル構造があります。

 /var/www/includes/templates/header.html
                             navigation.html

header.htmlは次のようになります。

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Test Portal</title>

 </head>

このような場合でも、他の投稿の例に従って、divを作成し、jqueryを介してdivを設定できますか？

javascriptjqueryhtmlinclude
16
Happydevdays

方法1：

JQueryを使用してhtmlコンテンツ/ファイルを別のhtmlファイルに含めるのが最善の方法だと思います。

単にjQuery.jsをインクルードし、$("#DivContent").load("yourFile.html");を使用してHTMLファイルをロードできます。

例えば

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

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

方法2：

ファイルをインクルードするために使用できるタグはありませんが、次のようなサードパーティ製のメソッドがいくつかあります。

<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>

<body>

<div w3-include-html="content.html"></div> 

<script>
w3IncludeHTML();
</script>

</body>
</html>

方法3：

一部の人々は、サーバーサイドインクルード（SSI）も使用しました。

<!--#include virtual="a.html" -->
25
Punit Gajjar

多くのファイルを含める必要がありました。そこで、次のスクリプトを作成しました。

<script>
  $(function(){
    $('[id$="-include"]').each(function (e){
        $(this).load("includes\\" + $(this).attr("id").replace("-include", "") +  ".html");
    });
  });
</script>

たとえば、divを使用して、挿入用のプレースホルダーを配置します。

<div id="example-include"></div>

含める必要のあるすべてのファイルのフォルダー「includes」を作成しました。ファイル「example.html」を作成しました。任意の数のインクルードで機能します。命名規則を使用して、含まれているすべてのファイルを適切なフォルダーに入れるだけです。

4
Maxim Trushin

HTMLタグを使用

私は同様の問題に直面しており、その後使用しました

<iframesrc = "b.html" height = "80px" width = "500px">

1
Akash Jaiswal

つかいます - <object> タグ：

<object data="filename.html"></object>
0
Rk003