使html中的段落包含文件中的文本

Question

我有一个html段落（在div中），我想在其中显示一个简单的固定文本。文本有点长，所以我宁愿文本在一个单独的txt文件中
类似的东西

<div><p txt=file.txt></p></div>

我能做这样的事吗？

Answer 1

您可以使用<object>标记在纯html中执行类似的操作：
<div><object data="file.txt"></object></div>

不过，这种方法有一些局限性，比如，它不能使块的大小与内容相适应——您必须手动指定width和height。并且样式不会应用于文本。

Answer 2

您可以使用一个简单的HTML元素<embed src="file.txt">，它加载外部资源并在屏幕上显示，不需要js。

Answer 3

它可以使用HTML <embed>或<object>标记、Javascript或PHP/ASP/其他后端语言来完成。

PHP（作为服务器端语言的示例）是我一直以来的做法：

<div><p><?php include('myFile.txt'); ?></p></div>

---

要使用它（如果你不熟悉PHP），你可以：

1）检查服务器上是否有php

2）将.html文件的文件扩展名更改为.php

3）将我的PHP示例中的代码粘贴到新重命名的PHP文件

Answer 4

Javascript将在这里完成任务。

function load() {
    var file = new XMLHttpRequest();
    file.open("GET", "http://remote.tld/random.txt", true);
    file.onreadystatechange = function() {
      if (file.readyState === 4) {  // Makes sure the document is ready to parse
        if (file.status === 200) {  // Makes sure it's found the file
          text = file.responseText;
          document.getElementById("div1").innerHTML = text;
        }
      }
    }
}
window.onLoad = load();

Answer 5

我会使用javascript来实现这一点。

var txtFile = new XMLHttpRequest();
txtFile.open("GET", "http://my.remote.url/myremotefile.txt", true);
txtFile.onreadystatechange = function() {
  if (txtFile.readyState === 4 && txtFile.status == 200) {
     allText = txtFile.responseText;
  }
document.getElementById('your div id').innerHTML = allText;

这只是一个代码示例，需要对所有浏览器等进行调整。

Answer 6

下面是我测试成功的javascript代码：

    var txtFile = new XMLHttpRequest();
    var allText = "file not found";
    txtFile.onreadystatechange = function () {
        if (txtFile.readyState === XMLHttpRequest.DONE && txtFile.status == 200) {
            allText = txtFile.responseText;
            allText = allText.split("n").join("<br>");
        }
        document.getElementById('txt').innerHTML = allText;
    }
    txtFile.open("GET", '/result/client.txt', true);
    txtFile.send(null);