Javascript 如何在当前html代码中使用外部html文件_Javascript_Jquery_Html

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

javascript jquery html

Javascript 如何在当前html代码中使用外部html文件,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试将外部HTML页面（通用导航）加载到当前HTML页面中。我尝试了加载函数，但它已被弃用。你能告诉我另一种包含它的方式吗？我没有使用任何服务器这是我的密码 <!DOCTYPE html> <html> <head> <script src="ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(

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


$（文档）.ready（函数（）{
$（'#content'）.load（“nav.html”）；
});

您应该使用

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

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

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

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

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

试试这个

<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>


函数加载页（href）{
var xmlhttp=new XMLHttpRequest（）；
open（“GET”，href，false）；
xmlhttp.send（）；
返回xmlhttp.responseText；
};
document.getElementById（'content'）.innerHTML=
loadPage（'your_html_file.html'）；

jQuery ajax load（）未被弃用。您的问题在这个问题中得到了回答：“不使用服务器”。将需要使用get方法尝试，然后替换$（“html”）.html（response），以便执行您要求的操作；也许值得指出的是，SSI和javascript是独立的（且相互冲突的）方法，用于完成相同的任务——正如本文所述，它们似乎应该一起使用，但事实并非如此。（另外，我非常确定这里描述的文件扩展名/doctype内容是：至少在Apache中，服务器需要配置为检查特定的文件扩展名（传统上是.shtml）是否包含include指令；您应该在.shtml中包含.html，而不是相反。（这就是为什么您需要在客户端覆盖mimetype，因为您没有在服务器端正确配置它。）感谢您的贡献，但这并不能真正回答问题，这是关于如何在页面中包含外部html，而不是如何链接到页面。最好不要在代码中包含无关元素，例如按钮标记，它与链接无关，实际上在此处使用时是无效的：）

<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>