我如何使用 w3.js 在 head 标签中包含片段

Question

使用 w3.js 文件，可以将 html 片段包含到另一个 html 文件中，类似于我们在 php 中看到的，但缺点是这只有效在页面的正文中。例如

<body> 
<div w3-include-html="./src/nav.html"></div>
<script>w3.includeHTML();</script>
.
.
.
</body>

我现在的问题是：是否可以在 head 标签中进行这项工作？这样就不必在每个页面上重复相同的多个链接块？

Answer 1

W3.js 可以在头部和主体中包含元素。

为了确定，我创建了一个快速 test，它可以使用：

<html>
    <head>
        <title>Include Test</title>
        <link w3-include-html="head_include.html"/>
    </head>
    <body>
        <h1>This is a test</h1>
        <div w3-include-html="body_include.html"></div>
    </body>
    <script src="w3.js"></script>
    <script>w3.includeHTML();</script>
</html>

此处使用 W3.js 包含 HTML 功能将样式表添加到 link 标记中。

但是：

如果您在本地处理此文件，这将不适用于“file://”，因为它正在使用 AJAX 调用，并且 CORS 策略可能会阻止它。
这依赖于在页面上执行的 Javascript，改变 DOM，所以如果在客户端禁用 Javscript，这将不起作用，因为它会在诸如网络之类的东西上爬虫。
与 php 不同，这对客户端可见。

有很多模板替代方案，如果这是您的目标，您可能希望查看 Server-Side Includes if PHP 在您的托管解决方案中不可用，因为这将允许您使用正确配置的服务器执行包含 HTML。

我如何使用 w3.js 在 head 标签中包含片段

how do i use w3.js to include snippets in the head tag

html

javascript

include

head

w3.js