如何只使用HTML/CSS重用页脚？

Question

5

如果你只有HTML/CSS和JavaScript，是否有一种解决方案可以在多个页面上重用页脚？

- 4thSpace

1

如果您能够使用服务器端代码，例如“包含”等，那么有一些解决方案相当容易。但如果不能，则最好使用其src属性设置为页脚文档的iframe，或者可以对页脚文档进行AJAX调用。 - Scott Marcus

这些页面需要存储在HTML文件中，还是可以作为单个HTML文件应用程序？ - Aaron Franco

我认为你可以使用React.js。 - Juan Caicedo

你需要服务器端代码或静态网站生成器。 - SLaks

$('#myDiv').load('path_to_your_html/name_of_your_html.html') - Adam Buchanan Smith

显示剩余2条评论

5个回答

5

把你的代码放在一些 HTML 文件中，然后使用 jQuery 在你想要的文件中包含它。jQuery .load() 从服务器加载数据。

$('#targetContainerID').load('path/to/html/reuse.html');

请看一下HTML模板。

- Abdul Mannan

这是最佳解决方案。 - Adam Buchanan Smith

1

jQuery 对我来说似乎有点过头了，仅仅为了这个...特别是因为 OP 写了“也许还有 JavaScript”... - Constantin Groß

1

将页脚的标记保存在JS中，或通过Ajax从文件加载JS，并将其附加到页面中，并在每个HTML文件中包含JS。

- Constantin Groß

-1

你可以使用React.js。你可以使用服务器端模板。你可以使用Javascript和Jquery的appendChild或者Javascript原生的element.innerHtml，例如：

document.getElementById("footer").innerHtml = ....

- Rhys Bradbury

-1

有一种方法，使用HTML导入，但这不被所有浏览器支持。

- dnviveros

1

这种方法现在已经（不幸地？）被弃用，并且没有任何浏览器支持它。 - exyi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Thomas · Accepted Answer

你可以将页脚HTML放在单独的文件中，然后使用JavaScript加载该文件的HTML内容，并将其附加到页面中的一个div中。

$("#footer").load("footer.html");

这是一个链接，可以点击进入指定网页。