2009-06-10 19 views
6

私は1つの純粋なhtmlページを持っています。 sample.html。私はex.Orginal.htmlのために別の純粋なhtmlにこのhtmlを含める必要があります。私はsample.htmlにヘッダーイメージを持っています。これはOrginal.htmlページの一番上に来るはずです。純粋なhtmlを別のhtmlに追加するには

+0

私はあなたがこれを動的に行うことがしたいと?どの言語を使いたいですか? Javascript、PHP、ASP.NET、...? – Peter

+1

私は彼が本当に平凡なHTMLについて話していることを理解しています。 –

答えて

4

フレームやiframe要素を使用しない限り、純粋なHTMLではこのようなことはできません。しかし手でそれらをより良くマージしてください...

+0

多くのページに何かを含めるとその情報が変わった場合は、多くのページを変更する必要があります。理想的には、サーバー側の技術を使用して情報を表示し、表示するページが1つ(HTTPリクエストが少なく索引付けが改善される)になるようにしますが、この問題に対する純粋なhtml回答を探しています。 – Fenton

+0

それは私の要点です:) 私はサーバー側で何かを使っていますが、ここではほんの一握りのファイルについて話していれば、最高の解決策はHTMLを更新することです。純粋なHTMLなら、なぜそれをより複雑にするのですか?このようなシナリオでは、簡単な編集が最も実用的です。 –

5

Apache Webサーバーを使用している場合は、server side includesを試してみてください。

+1

IISもこれをサポートしているようです http://www.microsoft.com/technet/prodtechnol/WindowsServer2003/Library/IIS/eced0b89-e052-42ff-baa8-751dd191c3b5.mspx?mfr=true –

0

JavaScriptを使用して、あるドキュメントから別のドキュメントにHTMLの一部を読み込むことができます。このタスクはjQuery toolkitを使用して非常に簡単です:

$("The ID of a container (a div element for instance) in which you want to load 
the contents of a HTML file").load("path to html file you want to load"); 


<div id="inserthere" /> 


$(function() 
{ 
    $("#inserthere").load("loadme.html"); // Load the contents of loadme.html 
              // and stuff it in the div with the 
              // ID of "inserthere" 
}); 
+0

"含むファイル"は、DOMの読み込みが終了したときにのみ表示され、コンテンツを表示するためのajax呼び出しも行います。これは正しく見えません。 –

1

(彼らと一緒に利用可能な様々な技術の概要を持っている参照してくださいInclude One File In Another、長所と短所)。ここで

3

は、すべての主要なブラウザでサポートされている(とHTML 5仕様である)された不思議なHTML 4仕様書に記載されていないが、IFRAME、純粋なHTMLでそれを行う方法の一例である

<body> 
<h1>This is original page</h1> 
<p>Some content on original page.</p> 
<iframe src="sample.html" width="600" height="300"></iframe> 
</body> 

幅と高さを調整することができます。また、ページをよりシームレスにする場合は、枠線を削除することもできます。

特にモバイルデバイスで表示したい場合は、この問題のJavaScriptソリューションに注意してください。

その他の注意:有効なマークアップではないため、フレームセットソリューションも避けてください。 PHPで

-1

、簡単かつ出力がHMTL次のようになります。

Orginal.php

<!--headers --> 
<? 
include 'sample.html'; 
?> 
<!-- rest of your site -->