导入1MB TXT文件到HTML后JS滚动文本显示undefined问题

我有一个1MB大小的TXT文件，希望将其导入HTML页面并赋值给全局变量，之后使用JavaScript文本滚动功能，但滚动内容显示“undefined”，请问原因是什么？

头部代码 #

<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /*loop through a collection of all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain attribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /*make an HTTP request using the attribute value as the file name:*/
      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.";
          }
          /*remove the attribute, and call this function once more:*/
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
};
</script>

主体代码 #

<script> w3-include-html="listone.html"</script>
<script>var $f=includeHTML() ;</script>
<script type="text/javascript" src="/xbMarquee.js"></script>
<script type="text/javascript">
function init() { rtl_marquee.start(); }
var $f=includeHTML() ;
var rtl_marquee_Text = $f ;
var rtl _marquee_Direction = 'left';
var `rtl_marquee_Contents='<span style="font-family:Comic Sans MS;font-size: 12pt; white-space: nowrap;">' + $f + '</span>';
rtl_marquee = new xbMarquee('rtl_marquee', '29px', '90%', 6, 100, rtl_marquee_Direction, 'scroll', rtl_marquee_Contents);
window.setTimeout( init, 200);
-->
</script>

原因分析 #

1. includeHTML函数无返回值：你用var $f=includeHTML()赋值，但includeHTML函数最后仅执行return;，没有返回任何内容，导致$f直接是undefined，这是滚动内容显示undefined的核心原因。
2. 异步逻辑未处理：includeHTML内部用的是异步AJAX请求，就算函数有返回值，你同步赋值的方式也拿不到异步请求的结果——代码执行到var $f=includeHTML()时，AJAX还没完成，文件内容根本没获取到。
3. 语法错误：
   • 变量名rtl _marquee_Direction多了空格，应该是rtl_marquee_Direction，语法错误会导致后续代码异常；
   • var rtl_marquee_Contents=...`用了错误的反引号包裹变量名，应该用普通单引号或双引号。
4. 属性使用错误：你在<script>标签上加w3-include-html属性，虽然函数会遍历所有元素，但<script>标签的innerHTML被设置后不会作为文本内容被正常读取，应该用一个普通容器标签（比如<div>）来承载这个属性。

解决方法 #

1. 修正语法错误 #

把变量名的空格去掉，替换错误的反引号：

var rtl_marquee_Direction = 'left';
var rtl_marquee_Contents='<span style="font-family:Comic Sans MS;font-size: 12pt; white-space: nowrap;">' + $f + '</span>';

2. 处理异步逻辑，获取文件内容 #

修改includeHTML函数，支持回调函数，在AJAX成功后传递文件内容，再初始化滚动：

<script>
function includeHTML(callback) {
  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) {
          var content = '';
          if (this.status == 200) {
            content = this.responseText;
            elmnt.innerHTML = content;
          } else if (this.status == 404) {
            content = "Page not found.";
            elmnt.innerHTML = content;
          }
          elmnt.removeAttribute("w3-include-html");
          includeHTML(callback);
          // 执行回调，传递内容
          if (typeof callback === 'function') {
            callback(content);
          }
        }
      }
      xhttp.open("GET", file, true);
      xhttp.send();
      return;
    }
  }
};
</script>

3. 替换容器标签，正确调用 #

把原来的<script w3-include-html="listone.html"></script>换成普通容器，比如：

<div id="txt-content" w3-include-html="你的文件路径.txt"></div>

然后在脚本中通过回调获取内容并初始化滚动：

<script type="text/javascript" src="/xbMarquee.js"></script>
<script type="text/javascript">
function initMarquee(content) {
  var rtl_marquee_Direction = 'left';
  var rtl_marquee_Contents='<span style="font-family:Comic Sans MS;font-size: 12pt; white-space: nowrap;">' + content + '</span>';
  var rtl_marquee = new xbMarquee('rtl_marquee', '29px', '90%', 6, 100, rtl_marquee_Direction, 'scroll', rtl_marquee_Contents);
  rtl_marquee.start();
}

// 调用includeHTML，传入回调
includeHTML(initMarquee);
</script>

4. 注意文件路径 #

确保你的TXT文件路径正确，如果是和HTML同目录，直接写文件名即可，否则要写正确的相对或绝对路径。

内容的提问来源于stack exchange，提问作者Oscardot