部分呈現在HTML/JavaScript

我試圖澄清我想要做什麼。我有一些HTML文件，我想在其他HTML文件中部分渲染它們中的每一個，例如header.html和footer.html以觀察DRY概念。部分呈現在HTML/JavaScript

HTML文件應該是這樣的：

<!--render header.html--> 
<div> 
    Content 
</div> 
<!--render footer.html-->

我怎麼能這樣做？

來源

2012-07-22 Afshin Mehrabani

你想包括一個HTML文件的另一個內容是什麼？ – starbeamrainbowlabs 2012-07-22 07:43:39

@starbeamrainbowlabs：的確，是的。 – 2012-07-22 07:45:37

你可以使用PHP或其他服務器端編程語言，還是它必須是所有客戶端？ – starbeamrainbowlabs 2012-07-22 08:15:05

Here's a link（來自Google的第一個我可能會添加的），它解釋瞭如何在各種語言中執行此操作。

另請注意，有些IDE會爲您處理此問題。 Dreamweaver就是一個例子。在ASP.NET中有主頁面;等等。

PHP：

<?php 
require($DOCUMENT_ROOT . "path to file/include-file.html"); 
?>

ASP：

<!--#include file="path to file/include-file.html"-->

JS：

JavaScript是另一種方式，包括你的網站的網頁中的HTML。這具有不需要服務器級編程的優點。但這比服務器級別的包含方法稍微複雜一些。

將您網站常用元素的HTML保存爲JavaScript 文件。任何寫在這個文件中的HTML都必須使用document.write函數打印到屏幕。

使用腳本標記在您的頁面上包含 JavaScript文件。
<腳本類型=「文/ JavaScript的」 SRC =「文件/文件路徑包括-file.js」>

使用上要包含的文件每一頁相同的代碼。

請注意的JS版本是不理想。
1. JS可能在瀏覽器中被禁用或不可用。
2.頁面不會一次渲染/加載。

此外，我不認爲DRY真的是這個計數。考慮使用將爲您創建頁面模板的IDE（例如Dreamweaver）。

如果你夠勇敢（和一點點老式的），你可以不使用任何上述情況，考慮使用的iframe的內容：

<html> 
    <body> 
     <div>my header</div> 
     <iframe src="mycontent.html" /> 
     <div>my fooder</div> 
    </body> 
</html>

免責聲明
我會寧可切斷我自己的手，也不要執行iframe或JS方法。請深入考慮您是否真的需要需要來做到這一點。

來源

2012-07-22 07:43:23

他正試圖將HTML文件包含在HTML文件中，您如何在.html擴展文件中使用php？ – DannyG 2015-10-29 20:25:11

@DannyG我的回答證明了如何在許多技術中實現這一點。雖然我不建議這樣做，但如果OP想要使用HTML文件來做到這一點，那麼選項就是JS或IFRAME，正如我的文章中所述。從JS部分報價：「不需要服務器級編程」 – 2015-10-30 14:14:08

@DannyG JS也可以用來做XHR請求拉在內容 – 2015-10-30 14:15:41

如果您正在使用服務器端編程，您可以使用服務器端包含否則，如果你的主機文件是一個HTML文件，那麼你可以使用HTML腳本標記包含了header.html和footer.html文件。雖然，不確定部分呈現HTML文件是什麼意思？

來源

2012-07-22 07:44:06 Shant

我不使用任何服務器端語言。只有JavaScript，HTML和jQuery。 – 2012-07-22 07:45:13

那麼在這種情況下，你可以使用script標籤包括與具有HTML文件的URL src屬性的HTML文件。 Flem發佈的文章非常有幫助。 – Shant 2012-07-22 07:47:22

如果你只是使用普通的HTML和Javascript，您可以包括jQuery和使用AJAX請求加載另一個HTML網頁在您的主頁上抗衡。

看一看jQuery的 '負荷（）' 函數在這裏：

http://api.jquery.com/load/

假設你有以下的html：

<div id="header"></div> 
<div id="content"></div> 
<div id="footer"></div>

您的使用情況會是這個樣子：

$('#header').load('header.html'); 
$('#footer').load('footer.html');

來源

2012-07-22 07:46:47 dougajmcdonald

這將導致一個跨源請求錯誤對我來說： -/ – ajbraus 2015-03-31 05:48:01

如果你正試圖從另一個域加載內容（除非他們已經啓用了CORS） – dougajmcdonald 2015-12-17 14:16:11

...或者，如果你從一個本地的HTML文件運行這個它會做。 – marsze 2016-07-14 07:51:19

如果你正在尋找一個客戶端只能這樣lution是html/js只有你應該看看AngularJS和它的ngInclude語法。

http://docs.angularjs.org/#!/api/ng.directive:ngInclude

來源

2012-07-22 07:48:41 Christoph

感謝Christoph！「ng-include src」很酷，看起來fragment.js可以做同樣的工作，但會引發錯誤.... – dfang 2013-04-05 03:50:43

部分呈現在HTML/JavaScript

回答

相關問題