Question

我正在尝试将外部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>

Answer 1

您应该使用SSI-function。

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

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

可以将其插入<div>中以在CSS中进行进一步的样式设置。

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

的一部分

更改文件

您在HTML上使用的方法正确，对您的JS也正确。我在那里包含很多包含文本的html文件。

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

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

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

请考虑使用e.preventDefault();。这样，我告诉浏览器 NOT 将其视为导航链接，因此仅将内容加载到<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');
  }
});

Answer 2

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

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

按钮是您的选择，它只是示例，可以帮助您轻松使用html链接。

Answer 3

尝试一下

   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');

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

如何在当前HTML代码中使用外部HTML文件

3 个答案: