首頁猿問如何在 100...

如何在 100 多個網頁的網站中使用 JavaScript 組件實現 HTML

JavaScript

慕森王 2022-01-01 20:12:01

我有一個包含 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>  <link rel="stylesheet" href="../../assets/css/theme.css">  <link rel="stylesheet" href="../../documentation/assets/css/starter.css"></head><body>  <header id="includedContent"></header>

查看完整描述

2 回答

交互式愛情

TA貢獻1712條經驗獲得超3個贊

您已將此問題標記為 PHP 和 JS，因此我強烈建議您在 PHP（或您可能正在使用的任何其他服務器端語言）中執行某種常見的包含，而不是嘗試這樣做客戶端（如 smootok 所示）主要是因為它會更加可靠，但也因為它在客戶端上也會更快。

例如： <?php include("includes/header.php");?>

反對回復 2022-01-01

手掌心

TA貢獻1942條經驗獲得超3個贊

你可以用你想要的內容創建一個新的文件頭，然后使用w3-include-html屬性包含它

例子

添加javascript

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() ：

includeHTML();

</script>

參考：https : //www.w3schools.com/howto/howto_html_include.asp

反對回復 2022-01-01

2 回答
0 關注
139 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何在 100 多個網頁的網站中使用 JavaScript 組件實現 HTML

如何在 100 多個網頁的網站中使用 JavaScript 組件實現 HTML

2 回答

添加回答