Question

嗨，我有一个 HTML 文件，我想知道如何在不需要 JS 文件的情况下将它放入 HTML 中

Answer 1

您可以在自定义 JavaScript 的帮助下完成这项工作。

假设您有一个名为：file1.html

的 HTML 文件

&你想在打开home.html时在home.html文件中添加file1.html的内容，它也应该显示文件中的内容.html 文件。

为此，请执行以下操作。

创建一个名为：file1.html 的文件并添加以下代码。

<h1>This is Content from file1.html</h1>

创建另一个名为：home.html 的文件并添加以下代码。

<script>
function includeHTML()
{
    var z, i, elmnt, file, xhttp;
    z = document.getElementsByTagName("*");
    for (i = 0; i < z.length; i++)
    {
        elmnt = z[i];
        file = elmnt.getAttribute("w3-include-html");
        if (file)
        {
            xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function()
            {
                if (this.readyState == 4)
                {
                    if (this.status == 200) {elmnt.innerHTML = this.responseText;}
                    if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
                    elmnt.removeAttribute("w3-include-html");
                    includeHTML();
                }
            }      
            xhttp.open("GET", file, true);
            xhttp.send();
            return;
        }
    }
};
</script>
<h1>This is Content from Home1.html.</h1>
<div w3-include-html="file1.html"></div> 
<script>
includeHTML();
</script>

Answer 2

可能是您正在寻找的 iframe？内嵌框架用于在当前 HTML 文档中嵌入另一个文档。 https://www.w3schools.com/html/html_iframe.asp

Answer 3

HTML5 导入，我们现在可以使用该元素将一个 HTML 文件加载到另一个文件中。

<link href="extern.html" rel="import" />

访问导入文件的内容导入文档中的内容将被加载，但不会显示。所有文本、图像和其他媒体都将不可见，因为它们不是父文档的 DOM 树的一部分。不过，您仍然可以通过 JavaScript 访问它们。

var extern = document.getElementsByTagName("link")[0].import;

我们的示例假设第一个“link”元素加载了一个 HTML 文件。使用 JavaScript 属性“import”，我们将导入文件的完整树结构写入变量。从那里我们可以通过 JavaScript 访问各个节点。

var getPTag= extern.getElementsByTagName("p")[0];

从这里我们可以使用常见的 JavaScript 方法（例如“getElementsByTagName()”）访问和读取所有节点。现在我们可以轻松地将它们添加到父文档的 DOM 树中。在更激进的方法中，我们也可以将“body”元素完全替换为导入文件的内容。

window.addEventListener("load", function() {
  document.getElementsByTagName("html")[0].replaceChild(extern.getElementsByTagName("body")[0], document.getElementsByTagName("body")[0]);
}

如何允许将js放入HTML文件中

3 个答案: