使用JavaScript导入HTML是否可行？

Question

我有几个具有相同页脚的html页面。只用JavaScript，我能在其中导入另一个html页面吗？

- walves

---

如果您选择了jQuery作为接受的答案，请更改标题或至少添加一个标签以包含它。 - Patrick Beynio

Answer 1

以下是如何使用纯JavaScript为页面添加页脚的方法。

使用fetch和insertAdjacentHTML函数的2022代码示例：

async function addFooter() {
    const resp = await fetch("footer.htm");
    const html = await resp.text();
    document.body.insertAdjacentHTML("beforeend", html);
}

2011年的原始代码，使用XMLHttpRequest和innerHTML：

var ajax = new XMLHttpRequest();
ajax.addEventListener("load", function () {
    document.body.innerHTML += ajax.responseText;
}
ajax.open("GET", "footer.htm");
ajax.send();

即使在今天，2011年的代码仍然可以在所有浏览器中运行，但fetch更加直观，并且允许您避免编写事件处理程序回调。 insertAdjacentHTML也适用于所有浏览器，因此您可以使用它或者innerHTML，使用这两个示例之一。只有fetch是新的，在IE中需要polyfill才能正常工作。

- gilly3

---

这是原生JS，对吗？ - carloswm85

@carloswm85 - 是的，但它已经过时了。自2011年以来，使用fetch而不是XMLHttpRequest更为常见。我将对我的答案进行2022年的更新。 - gilly3

我也看到一些人使用js模块系统，要么通过"import myHtml from htmlPath"导入，要么使用"await import(htmlPath)"这样的导入语法，但我不确定在什么情况下会优先选择这种方式而不是fetch，或者这两种"import"策略之间的区别是什么？ - David Mays

Answer 2

如上所述，一种方法是使用jQuery的load函数。我恰好现在也在做完全相同的事情，所以将发布一个快速示例。

使用jQuery：

$("#yourDiv").load('readHtmlFromHere.html #readMe');

你的readHtmlFromHere.html页面将包含：

<div><div id="readMe"><p>I'm some text</p></div></div>

- Ricky

---

#yourDiv是什么？它是主HTML（也称为index.html）中所需位置的ID吗？ - Jacobo Koenig

这是用于注入 HTML 的 div 包装器。例如 <div id='yourDiv'>HTML 将在此处注入。</div>。 - Ricky

不使用jQuery或其他库，纯粹使用JS怎么样？我想先将HTML模板文件“导入”到一个变量中，以便在将其附加到HTML元素之前操纵其内容。 - Fabricio

Answer 3

您可以使用ajax返回整个HTML页面。如果您想要替换整个页面，您可以将当前页面上的body标签及其所有子元素替换为从ajax调用返回的body标签。

如果您只想替换一个部分，则必须编写服务器端脚本来创建该部分，然后像上面一样使用ajax，但仅替换一个元素而不是整个页面。

- Alex

Answer 4

除了@Alex提到的内容外，jQuery还有一个方法.load()，您可以使用它来获取页面的特定部分 (请参见该页上的"加载页面片段"标题)。您可以指定要检索的URL以及选择器（例如，如果您只想要特定的<DIV>内容）。

- Brad Christie

Answer 5

根据这个答案的示例（是该问题的答案之一），我创建了这个小的可重用函数：

/**
 * Render the array of html files, to the
 * selected container.
 * @param {*} pages - array of html file names
 * @param {*} container - HTML element name
 */
function render(pages, container) {
    const template = document.createElement("template");
    var ajax = new XMLHttpRequest();

    pages.forEach(element => {
        // this is the route where the files are stored
        ajax.open("GET", `./view/shared/${element}.html`, false);
        ajax.send();
        template.innerHTML += ajax.responseText;
    });

    document.querySelector(container).append(template.content);
}

export { render };

您可以在您的index.js文件中使用它，就像这样：

import { render } from "./tools/render.js";

var headerContent = ["siteName", "navbar"];

render(headerContent, "header");

这是将HTML文件siteName.html和navbar.html渲染到站点根目录的index.html文件的<header>标签中。

注意。该函数在本地主机上工作正常，但由于某种原因（我仍需修复；修复后会告知您），在GitHub Pages工作时无法正常工作。

- carloswm85

Answer 6

fetch("MyHTMLFile.html").then((response) => {
  response.text().then((text) => {
    targetHTMLElement.innerHTML = text;
  });
})

- Doron Saar

Answer 7

你可以使用服务器端包含（SSI）来实现，具体取决于你的Web服务器。 但最快的方法可能是创建一个JavaScript文件，使用document.write或类似的方法输出HTML语法， 然后像正常情况下一样包含所创建的JavaScript文件。 更多信息请参见： http://webdesign.about.com/od/ssi/a/aa052002a.htm

- Stephan

Answer 8

你肯定可以这样做，但如果你只是在进行模板编写，我建议你在服务器上完成。

- Andrew Noyes

---

你为什么推荐这个？ - carloswm85

@carloswm85 我认为性能会更快，因为页面在交付给客户端之前就已经呈现出来了，而且客户端看到页面在本地呈现时闪烁的可能性也较小。 - johny why