问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

在另一个 html 文件中包含 html

社区维基
1
新手上路，请多包涵

我有一个 html“head”模板和一个导航模板，我想将它们包含在我网站的所有其他 html 文件中。我找到了这篇文章：

在 HTML 文件中包含另一个 HTML 文件

我的问题是……如果它是我想要包含的标题怎么办？

例如，我有以下文件结构：

  /var/www/includes/templates/header.html
                             navigation.html

header.html 可能如下所示：

 <!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Test Portal</title>

 </head>

在这种情况下，我仍然可以按照另一篇文章中的示例创建一个 div 并通过 jquery 填充 div 吗？

原文由 Happydevdays 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptjqueryhtmlinclude
阅读 630
2 个回答
得票最新
社区维基
1
✓ 已被采纳

方法一：

我认为使用 jQuery 将 html 内容/文件包含到另一个 html 文件中是最好的方法。

您可以简单地包含 jQuery.js 并使用 $("#DivContent").load("yourFile.html"); 加载 HTML 文件

例如

<html>
  <head>
    <script src="jquery.js"></script>
    <script>
    $(function(){
      $("#DivContent").load("another_file.html");
    });
    </script>
  </head>

  <body>
     <div id="DivContent"></div>
  </body>
</html>

方法二：

没有可用于包含文件的此类标签，但有一些第三方方法可用，如下所示：

 <!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>

<body>

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

<script>
w3IncludeHTML();
</script>

</body>
</html>

方法三：

有些人还使用服务器端包含（SSI）：

 <!--#include virtual="a.html" -->

原文由 Punit Gajjar 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

使用 <object> 标签：

 <object data="filename.html"></object>

原文由 Ritesh Khandekar 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题