async function getFileContentAsText(file) {
const response = await fetch(file);
const fileContent = await response.text();
return fileContent;
}
async function insertContentsFromFiles() {
const tbl = document.querySelectorAll('[data-src]'); // get elements with the data attribute "data-src"
for (var i=0; i < tbl.length; i++) // loop over the elements contained in tbl
tbl[i].innerHTML = await getFileContentAsText(tbl[i].dataset.src);
}
// dont forget to call the function to insert the files content into the elements
insertContentsFromFiles();
4条答案
按热度按时间ix0qys7i1#
您可以使用jQuery来完成此操作：
并以HTML格式加载：
nkcskrwz2#
只需将扩展名改为
.php而不是.html，然后你就可以把整个头部放入文件head.php（或head.inc）中。整个事情看起来就像这样：
很明显，你可以像这样把身体分割成几块：
pnwntuvh3#
你可以很容易地打破你的代码在多个文件，然后创建一个文件与.php扩展名，并包括他们所有！
qxgroojn4#
只有HTML是不可能的，您需要添加一些JavaScript才能做到这一点。
使用带有Fetch API和一些async functions的data attribute，您可以执行以下操作：
HTML文件：
此元素将接收
data-src属性中指定的file的内容作为HTML内容。现在JavaScript：
当
insertContentsFromFiles()方法被调用时，它将首先检索具有data属性data-src的所有元素，然后我们使用data-src值和getFileContentAsText()方法循环这些元素，以影响它们的innerHTML属性作为data属性中指定的文件的内容。由于我们使用querySelectorAll()来获取具有
data-src属性的元素，因此只要元素具有该data属性，上面的JavaScript代码就可以处理无限数量的元素。**注意：**在当前状态下，上述JavaScript代码未针对加载大量文件进行优化，因为它会逐个处理要加载的文件。如果您对解决此问题感兴趣，则可能需要使用promise.all()并更新
insertContentsFromFiles()方法，以便通过利用异步操作来并行化文件加载。**警告：**如果您计划使用从JavaScript加载的文件中的元素，则必须在将这些元素加载到页中之后对其进行检索，否则它们将具有
undefined值。为此，您可以在加载文件时调度事件，以便根据触发的事件将特定功能附加到页。