包含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文件？

回答

相关问题