将 HTML 页面包含到另一个 HTML div 中不起作用答案

【问题标题】：Include HTML page into another HTML div not working将 HTML 页面包含到另一个 HTML div 中不起作用
【发布时间】：2020-07-19 15:20:36
【问题描述】：

好的 - 这让我发疯了。如此简单的负载，但什么也没有发生。有什么想法可以解决这个问题吗？理想情况下，我想创建组件（页眉/页脚/等）以在所有组件中重用。

这是我用于测试的 HTML。

<html>

<head>
 <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

 <script>
   $(document).ready(function() {
     $("#included-page").load("test.html");
   });
 </script>

</head>

<body>
 <div id="included-page"></div>
 <!-- insert page 2 test -->
 <h1>This Page 1</h1>
</body>

</html>

这是我要加载的测试页面

<!doctype html>
<html>
<head>
</head>
<body>
<p>Included from page test</p>
</body>
</html>

【问题讨论】：

检查开发工具的网络选项卡，了解 AJAX 请求失败的原因。很可能是路径错误。但是在客户端包含内容并不是一个好主意。改为服务器端。另外，包含的 HTML 不应该有自己的doctype、head 等，只有要注入的内容

标签： javascript jquery html include

【解决方案1】：

我会发现使用 include 语句更容易，因为不需要 javascript：

<html>

<head>
 <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

 <script>
   $(document).ready(function() {
     $("#included-page").load("test.html");
   });
 </script>

</head>

<body>

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

 <h1>This Page 1</h1>
</body>

</html>

注意：这不是注释，但 include 语句的格式与 HTML cmets 相同。

【讨论】：

我也尝试过“include”语句，但没有成功。我还删除了 HTML（doctype，..etc），这两个文件都在同一个本地目录中。我也试过各种浏览器。
这很奇怪。您是否在浏览器中收到错误消息，例如找不到页面？您也可以尝试使用 test.html 的完整 URL 而不是相对 URL。如果这不起作用，我想你必须找到其他解决方案——祝你好运！
即使现在在具有完整 URL 链接的服务器上，我也没有收到错误，只是没有加载“test.html”。可以在这里查看：wh481912.ispot.cc