如何在当前 html 代码中使用外部 html 文件答案

【问题标题】：How to use external html file in current html code如何在当前 html 代码中使用外部 html 文件
【发布时间】：2018-09-06 11:45:16
【问题描述】：

我正在尝试将外部 HTML 页面（通用导航）加载到我当前的 HTML 页面中。我尝试了加载功能，但它已被弃用。你能告诉我另一种包含它的方法吗？我没有使用任何服务器。

这是我的代码

<!DOCTYPE html>
<html>

<head>
  <script src="ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#content').load(" nav.html ");
    });
  </script>
</head>

<body>
  <div id="content "></div>
</body>

</html>

【问题讨论】：

jQuery ajax load() 未被弃用。 api.jquery.com/load
您的问题已在此问题中得到解答：stackoverflow.com/questions/8401113/html5-include-file。
“不使用服务器” 。需要这样做才能完成您的要求
Include another HTML file in a HTML file的可能重复
尝试使用get方法，然后替换$("html").html(response);

标签： javascript jquery html

【解决方案1】：

试试这个

<script>
    function loadPage(href) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", href, false);
        xmlhttp.send();
        return xmlhttp.responseText;
    };

    document.getElementById('content').innerHTML =
        loadPage('your_html_file.html');
</script>


<div id="content">

</div>

【讨论】：

【解决方案2】：

将两个文件页面放在同一目录中，然后您可以使用链接上的简单按钮来使用外部文件。例如

<button><a href="nav.html"> External file </a></button>

按钮是你的选择，它只是理解你可以简单地使用 html 链接的例子。

【讨论】：

感谢您的贡献，但这并不能真正回答问题，即如何在页面中包含外部 html，而不是如何链接到它。最好不要在你的代码中包含无关的元素，例如你的按钮标签，它与链接无关，实际上在这里使用是无效的：buttons can contain phrasing content, not interactive content。）

【解决方案3】：

您应该使用SSI-function。

有几种方法，但这可以解决您的问题。

<!--#include virtual="PathToYourFile/YourFile.html" -->

这可以插入到<div> 中，以便在 CSS 中进一步设置样式。

记住！由于 html-doctypes 的一些限制，您不能将 .html-file 包含到 .html-file 中。您必须使用另一种格式作为.shtml，您可以在其中包含您的.html 文件。您可以将.html 包含到您的.shtml 文件中。这也是 .shtml 最初创建的目的。这是因为它是XHTML (Dynamic XML HTML)...的一部分...

更改文件

您在 HTML 上的方法是正确的，您的 JS 也是正确的。我在其中包含了很多包含文本的 html 文件。

我的做法是，当页面加载时，一些文本将在<div> 内加载。下面的JS用来更改<div>中的内容。正如丹尼尔贝克在下面所说：“......至少在 Apache 中，服务器需要配置为检查特定的文件扩展名......”。您在 .htaccess 文件中配置文件。但只有你知道自己在做什么时才这样做。

某些（较新的？）服务器具有默认设置，如果您希望能够包含 .html 文件，则无需更改 .htaccess 文件。至少您可以将 .html 文件包含到 .shtml 文件中。

我已经包含了一个Mimetype 转换器，它告诉浏览器它应该如何读取文件。对于 txt/html，我告诉脚本它应该使用character encoding ISO-8859-1。其他如 UTF-8 也可以使用。这取决于您和您的接收者的母语。

考虑使用e.preventDefault();。有了这个，我告诉浏览器不将此视为导航链接，因此只会加载<div>中的内容。

$(function() {
  $('#ButtonsID').click(function(e) {
    $('.DivClass').load('PathToFile/File.shtml');
    e.preventDefault();
  });

});

$.ajaxSetup({
  'beforeSend': function(xhr) {
    xhr.overrideMimeType('text/html; charset=ISO-8859-1');
  }
});

【讨论】：

可能值得指出的是，SSI 和 javascript 是完成同一件事的独立（且相互冲突）的方法——正如这里所写，它们看起来像是要一起使用，这不是就是这样。
（我也很确定这里描述的文件扩展名/文档类型是backwards：至少在 Apache 中，服务器需要配置为检查特定的文件扩展名——传统上是 .shtml——对于包含指令；您将 .html 包含在 .shtml 中，而不是相反。（这就是您需要在客户端覆盖您的 mimetypes 的原因，因为您没有在服务器端正确配置它.)