W3.JS HTML Includes 包含
HTML
保存 HTML 在你想包含的 HTML 文件中:
content.html
<a href="https://www.w3ccoo.com/html/">HTML</a><br>
<a
href="https://www.w3ccoo.com/css/">CSS</a><br>
<a
href="https://www.w3ccoo.com/bootstrap/">Bootstrap</a><br>
<a
href="https://www.w3ccoo.com/js/">JavaScript</a><br>
<a
href="https://www.w3ccoo.com/sql/">SQL</a><br>
<a
href="https://www.w3ccoo.com/php/">PHP</a><br>
<a
href="https://www.w3ccoo.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>
添加回调函数
在 web 页面中包含 HTML 片段时，必须确保在正确包含 HTML 之前不会执行依赖于所包含 HTML 的其他函数。
"hold back" 保留代码的最简单方法是将其放在回调函数中。
可以在 w3.includeHTML() 中添加回调函数作为参数:
实例
<script>
w3.includeHTML(myCallback);
function myCallback() {
// code that has to wait goes here
}
</script>
你将在本教程的下一章找到一个回调示例。
