Question

是否有一种简单的方法（或者可能是最简单的方法）将html代码片段（存储在文本文件中）包含在页面代码中？

E.g。文本文件fragment.txt包含：

<b><i>External text</i></b>

页面代码应该“动态”包含这个片段。（没有php ......？）

Answer 1

Javascript方法似乎是首选方法。但是通过下面的示例，您可能会遇到跨源请求（localhost到Internet，反之亦然）的问题，或者在包含不通过HTTPS提供的外部脚本时可能会遇到安全问题。

没有任何外部库的内联解决方案将是：

<!DOCTYPE html>
<html>
  <body>
    <div id="textcontent"></div>

    <script>
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      document.getElementById('textcontent').innerText = xhttp.responseText;
    };
    xhttp.open("GET", "content.txt", true);
    xhttp.send();
    </script>
  </body>
</html>

在这里，您需要与HTML文件位于同一文件夹中的文件content.txt。文本文件通过AJAX加载，然后放入id为textcontent的div中。错误处理不包括在上面的示例中。有关XMLHttpRequest的详细信息，您可以在http://www.w3schools.com/xml/xml_http.asp找到。

修改

在另一个答案中提到的VKK，您需要将文件放在服务器上进行测试，否则会出现像XMLHttpRequest cannot load file:///D:/content.txt. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
这样的跨源错误

Answer 2

您需要使用Javascript来执行此操作（或者我可能会避免使用iframe）。我建议使用JQuery框架。它提供了一个非常简单的DOM方法（加载），允许您将另一个文件的内容加载到HTML元素中。这非常适用于AJAX调用，但它也适用于您的用例。 fragment.txt需要与html页面位于同一服务器目录中（如果它位于不同的目录中，只需在路径上添加）。

load方法包含在$(document).ready事件处理程序中，因为只有在加载DOM（页面表示）之后才能访问/编辑contents元素。

大多数浏览器不支持本地AJAX调用（加载方法使用AJAX） - 通常将HTML和txt文件上传到服务器，然后在客户端上加入html文件。 Firefox确实支持本地AJAX，因此如果您想在本地测试它，请使用Firefox。

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
    <script>
        $(document).ready(function() {
            $("#contents").load("fragment.txt");
        });
    </script>
</head>
<body>

<div id="contents"></div>

</body>
</html>

Answer 3

用javascript。我用它。示例：

<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>

<body>

<div w3-include-html="content.html"></div>

<script>
w3IncludeHTML();
</script>

</body>
</html>

如何将文本文件中的代码片段包含到html中？

3 个答案: