我有一个包含 200 多个网页的网站，其中包含一个导航栏（标题）。我怎样才能自动化它，所以我不必担心使用 JavaScript 更改所有 200 多个网页中的标题。实现这一目标的最佳方法是什么？我已经使用 jQuery 实现如下，但导航栏没有显示。 <link rel="stylesheet" href="../../assets/vendor/cubeportfolio/css/cubeportfolio.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="jquery.js"></script> <script> $(function () { $("#includedContent").load("../../html/home/header.html"); }); </script> <!-- CSS Front Template --> <link rel="stylesheet" href="../../assets/css/theme.css"> <!-- CSS Front Doc --> <link rel="stylesheet" href="../../documentation/assets/css/starter.css"></head><body> <!-- ========== HEADER ========== --> <header id="includedContent"></header> <!-- ========== END HEADER ========== -->
2 回答
交互式爱情
TA贡献1712条经验 获得超3个赞
您已将此问题标记为 PHP 和 JS，因此我强烈建议您在 PHP（或您可能正在使用的任何其他服务器端语言）中执行某种常见的包含，而不是尝试这样做客户端（如 smootok 所示）主要是因为它会更加可靠，但也因为它在客户端上也会更快。
例如： <?php include("includes/header.php");?>
手掌心
TA贡献1942条经验 获得超3个赞
你可以用你想要的内容创建一个新的文件头，然后使用w3-include-html属性包含它
例子
<div w3-include-html="header.html"></div>
添加javascript
<script>
function includeHTML() {
var z, i, elmnt, file, xhttp;
/* Loop through a collection of all HTML elements: */
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/* Make an HTTP request using the attribute value as the file name: */
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/* Remove the attribute, and call this function once more: */
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/* Exit the function: */
return;
}
}
}
</script>
在页面底部调用 includeHTML() ：
<script>
includeHTML();
</script>
参考：https : //www.w3schools.com/howto/howto_html_include.asp
添加回答
举报
0/150
提交
取消