包含javascript或jQuery的html文件？

有沒有一種方法可以將.html文件包含到使用javascript或jQuery的其他頁面中，例如頁眉和頁腳文件，因爲這些文件在整個項目中保持不變。我可以看到使用jQuery的問題是，它可能會在這樣的文件之一，因此不使用它之前加載，所以我會認爲JavaScript將是一個更好的選擇。包含javascript或jQuery的html文件？

如果存在這樣的方法，它是否也緩存加載/包含的文件？

理想的解決方案不需要使用容器來加載數據，而是包含一個文件，就像在指定包含代碼的地方一樣。

編輯：至於一些建議.load方法可以使用，但可以說我需要加載標籤和它的內容像CSS文件，一些JavaScript等在整個頁面上使用，它似乎不正確加載到一個div，有沒有辦法實現它？使用$（document）.load（「header」）是一種可能的解決方案嗎？

來源

2014-03-26 Ilja

@安迪如果我想要t怎麼辦？ o是否包含整個標題以及

標記及其所有內容？所以我不必在每個頁面上指定css文件，等等。我可以用這種方法看到動態頁面標題的問題，但爲了舉例，我們可以忽略它 – Ilja

@Ilja您可以只有一個「head」元素每頁，除非你想使用'iframe's ...只需將你需要的東西加載到實際頁面的'頭部'。 – Teemu

我會看看模板引擎，如angular或doT.js，可能會讓你的工作更容易一些。這是一個網站，可能會幫助你[找到一個]（http://garann.github.io/template-chooser/） –

你可以有看起來像這樣的文件：

<!doctype html> 
<html> 
<head> 
<script> 

    ajax = new XMLHttpRequest(); 

    ajax.onreadystatechange = function() { 
     if(ajax.readyState == 4 && ajax.status == 200) { 
      document.getElementsByTagName("head")[0].innerHTML += ajax.responseText; 
     } 
    } 

    ajax.open("GET", "head.html", true); 
    ajax.send(); 

    ajax2 = new XMLHttpRequest(); 

    ajax2.onreadystatechange = function() { 
     if(ajax2.readyState == 4 && ajax2.status == 200) { 
      document.getElementsByTagName("body")[0].innerHTML = ajax2.responseText; 
     } 
    } 

    ajax2.open("GET", "body.html", true); 
    ajax2.send(); 

</script> 
</head> 
<body></body> 
</html>

來源

2014-03-26 18:50:06

你可以做這樣的：

$(function(){ 
    $("#header").load("header.html"); 
    $("#footer").load("footer.html"); 
});

HTML是：

<html> 
<head> 
<title></title> 
</head> 
<body> 
<div id="header"></div> 
<div id="footer"></div> 
</body> 
</html>

SOURCE

來源

2014-03-26 18:18:14 APAD1

是的，這是在評論中使用的方法安迪，但說如果我想加載它整個標籤及其內容，所以CSS文件等，所以我不必在每個頁面上定義它們？ – Ilja

是否可以通過$（document）.load（「header.html」）實現類似的功能？但在這種情況下，它必須是一個JavaScript方法，因爲我們還沒有加載jQuery。 – Ilja

包含javascript或jQuery的html文件？

回答

相關問題