W3.JS HTML 包含

包含 HTML 文件:

w3.includeHTML()

HTML

将要包含的 HTML 保存到 .html 文件中:

内容.html

<a href="https://www.91xjr.com/html/">HTML</a><br>
<a href="https://www.91xjr.com/css/">CSS</a><br>
<a href="https://www.91xjr.com/bootstrap/">Bootstrap</a><br>
<a href="https://www.91xjr.com/js/">JavaScript</a><br>
<a href="https://www.91xjr.com/sql/">SQL</a><br>
<a href="https://www.91xjr.com/php/">PHP</a><br>
<a href="https://www.91xjr.com/w3css/">W3.CSS</a><br>

包含 HTML

包含 HTML 是通过使用w3-include-html属性:

示例

<div w3-include-html="content.html"></div>

添加 JavaScript

HTML 包含是由 JavaScript 完成的。

确保您的页面有w3.js加载并调用w3.includeHTML():

示例

<script>
w3.includeHTML();
</script>

完整示例

示例

<!DOCTYPE html>
<html>
<script src="/lib/w3.js"></script>
<body>

<div w3-include-html="content.html"></div>

<script>
w3.includeHTML();
</script>

</body>
</html>
亲自试一试 » 使用 CSS »

包含许多 HTML 片段

您可以包含任意数量的 HTML 片段:

示例

<!DOCTYPE html>
<html>
<script src="/lib/w3.js"></script>
<body>

<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>

<script>
w3.includeHTML();
</script>

</body>
<html>

亲自试一试 » 使用 CSS »


添加回调函数

当您在网页中包含 HTML 片段时,必须确保在正确包含 HTML 之前,依赖于所包含 HTML 的其他函数不会执行。

"hold back" 代码最简单的方法是将其放置在回调函数中。

回调函数可以作为参数添加到 w3.includeHTML() 中:

示例

<script>
w3.includeHTML( myCallback);

function myCallback() {
  // code that has to wait goes here
}
</script>

您将在本教程的下一章中找到回调示例。