Question

我正在创建一个HTML文档，我希望将一个单独的文件（不是完整的HTML文档）中的HTML片段嵌入其中。

假设我要嵌入的文档如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link href="style.css" rel="stylesheet">
</head>

<body>
(stuff)
<placeholder />
</body>
</html>

并且要嵌入的代码是：

<h1>Hello world</h1>
<p>Lorem ipsum dolor sit amet, vel lucilius consequat adolescens ut, ex 
atomorum forensibus efficiendi mei. Eam adhuc regione eu, mei ex alia 
posidonium. Duis dicam postea mel id. Munere dolore ut eam, eam diam 
causae docendi id. At persius dolores eam, ea sea omnesque democritum, 
erroribus dissentiunt pro ut.</p>

请注意，我要嵌入的代码是不是完整的HTML文档;只是一个片段。如何使用JavaScript将占位符嵌入主文件中？

Answer 1

如果您接受jquery解决方案，则此任务变得微不足道：

$('placeholder').load('path/to/file.html');

使用jQuery#load获取本地文件（path/to/file.html）并将其内容放入placeholder元素。

详细了解jQuery选择器here，但要知道jQuery通常会接受所有带有一些修改的CSS选择器。

如果jQuery不是一个选项，那么使用XMLHttpRequests在“vanilla”javascript中完成此操作仍然有一个相当简洁的方法：

function loadFileIntoElement(filePath, elementSelector) {
  var request = new XMLHttpRequest();
  request.addEventListener("load", function() {
    var fileContents = this.responseText;
    document.querySelector(elementSelector).innerHTML = fileContents;
  });
  request.open("GET", filePath);
  request.send();
}

loadFileIntoElement('path/to/file.html', 'placeholder');

document.querySelector也应该接受所有有效的CSS选择器。

使用JavaScript在HTML文档中嵌入HTML片段？

1 个答案: