如何将外部 HTML 页面添加到我的当前页面，这是另一个 HTML答案

【问题标题】：How to add external HTML page to my current page which is another HTML如何将外部 HTML 页面添加到我的当前页面，这是另一个 HTML
【发布时间】：2020-10-31 20:40:38
【问题描述】：

我正在做一个项目，我必须在主 (Index.html) 页面中添加外部 HTML 文件作为页眉和页脚。我试过下面的脚本，但它没有工作

<!DOCTYPE html>
<html lang="en">
<head>
  <title>sample test</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  

  <script>
$(document).ready(function(){
   
   $('#header1').load("mainheader.html");

});
</script>
</head>
<body>
<div id="header1"></div>
</body>
</html>

【问题讨论】：

你可以用iframe标签解决这个问题，但是你的页面不会被浏览器索引。 load() 方法可以很好地处理这个问题。您可能给出了错误的路径。浏览器的“网络”标签中显示什么？
嗨@sergeykuznetsov，页面在同一个文件夹中，路径是正确的。如您所说，不推荐使用Iframe，如果有任何可能的情况，请帮助我。
您的项目是本地的吗？浏览器控制台（“网络”选项卡）写了什么？

标签： javascript html jquery twitter-bootstrap dom

【解决方案1】：

您可以使用 iframe 标签加载另一个 html 文件或 url。

<iframe src="your-html-route/another.html"></iframe>

【讨论】：

【解决方案2】：

使用 JavaScript 并使用组件。然后您可以使用模块来导入或导出组件并添加 HTML

document.queryselector('#header').innerHTML = '<header>content</header>';

如果你问我，PHP 更适合这样的事情。在另一个 .php 文件中创建页眉和页脚，并将它们包含在您想要使用它们的每个页面上。

【讨论】：

嗨@Thibaut，我正在尝试加载外部html页面。这不是一个小代码。
我建议您使用 PHP 或静态站点生成器。但 PHP 在我看来更有用。
嗨@Thibaut，我们只允许在我们的项目中使用HTML，CSS，JS 我们的项目不建议使用php。请帮我提供支持方案。
您可以使用我在上面添加的代码。我建议你在 w3schools 上学习 javascript DOM。比您只需将该组件的 html 代码放在字符串中，它就会加载到 html 中。 w3schools.com/js/js_htmldom_nodes.asp

【解决方案3】：

您的脚本$('#header1').load("mainheader.html"); 是正确的。事实上load() 方法（就像ajax）只在服务器上工作。为了使用load() 方法将外部页面加载到您的标签中，您需要将您的项目放在服务器上，或者在您的计算机上部署本地服务器。为此有很多程序，例如：OpenServer、Denwer、WampServer、XAMPP 等。我建议你使用 OpenServer。它是免费且易于使用的。部署本地服务器后，将项目推送到服务器，load() 方法将加载您的外部 html 文件。

【讨论】：

【解决方案4】：

如果只是一小段代码，那么你可以使用这个：

 <pre>
  <code>
    HTML code goes
    here.
  </code>
 </pre>

【讨论】：