2016-07-02 9 views
1

私はhtmlファイルを別のhtmlファイルに含める方法を探しています。たとえば、私は3つのhtmlファイルを持っています... 1)header.html 2)content.html 3)footer.html。 ..そして私はheader.htmlとfooter.htmlをcontent.htmlの中に入れたいので、複数のウェブサイトを作り、ヘッダとフッタを入れて、影響を受けるヘッダとフッタに何かを変更しなければならないすべてのウェブサイトに私はこのような私のファイルを含むhtmlファイルのインポートについて読んだHTML5のインポートが動作しません

<link rel="import" href="header.html"> 

私はそれを試して、それが動作しません。インポートはブラウザによってサポートされていますか?はいの場合、それをどのように機能させるでしょうか?

私はPHPのインクルードのような方法を探していますが、htmlのためです。

ありがとうございました。

答えて

2

これを行うには、サーバーサイドページを介して、またはJavaScriptを介してです。

PHPの例:

<html> 
<body> 

<h1>Welcome to my home page!</h1> 
<p>Some text.</p> 
<p>Some more text.</p> 
<?php include 'footer.php';?> 

</body> 
</html> 

Javascriptの例:

<script type="text/javascript"> 
function loadXMLDoc() { 
    var xmlhttp = new XMLHttpRequest(); 

    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == XMLHttpRequest.DONE) { 
      if (xmlhttp.status == 200) { 
       document.getElementById("myDiv").innerHTML = xmlhttp.responseText; 
      } 
      else if (xmlhttp.status == 400) { 
       alert('There was an error 400'); 
      } 
      else { 
       alert('something else other than 200 was returned'); 
      } 
     } 
    }; 

    xmlhttp.open("GET", "header.html", true); 
    xmlhttp.send(); 
} 
</script> 

JavascriptをjQueryを使って図書館:

$.ajax({ 
    url: "header.html", 
    success: function(data){ 
     $("myDiv").html(data.responseText); 
    } 
}); 

あなたがjsの中にあなたの手を汚すしたくない場合w3schoolsが提供するスクリプトを使用して以下を行うことができます:

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

<body> 

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

<script> 
w3IncludeHTML(); 
</script> 

</body> 
</html> 
+0

ありがとうZubair W3schoolsソリューションは素晴らしいですが、それを使用しても安全ですか?それは他の開発者から使用されていますか? – NoName84

+0

はい、次のhttp:// www.w3schools.com/lib/w3data.jsでソースコードをダウンロードできます。あなたのファイルシステムをローカルで見直してホストし、それをそこからインクルードします。 – zubair1024

+0

ok Zubair1024あなたの助けに感謝 – NoName84

1

これは不可能です。 HTMLページを別のページに含めることはできません。また、PHPのinclude()/ require()関数を使用する必要があります。

エルス

この(ここで私はjQueryのを使用)のように、あなたは、AJAXで動的に任意のページをロードし、あなたのメインページに出力を追加することができます。

<body> 
    <script type="text/javascript" src="jquery.min.js"></script> 
    <script type="text/javascript"> 
     $.ajax({ 
      url: 'page.html', 
      success: function(content) { 
       document.body.innerHTML += content; 
      } 
     }); 
    </script> 
</body> 

は(あなたが「エラー」イベントを追加する必要があることに注意してください等)それはちょうど簡単な例です

関連する問題