如何通过外部JavaScript加载文本文件并显示到HTML页面

一、无需按钮，直接将外部JS获取的文本显示到HTML #

你已经能在控制台打印文本，说明请求逻辑没问题，核心是要把文本插入到DOM元素里——document.getElementById()在外部JS里完全可用，只是要确保操作时机正确（DOM已加载+Twitch授权完成）。

给你具体的修改步骤：

1. 先在HTML里添加一个专门用来展示文本的元素：

<div id="text-content"></div>

2. 在你的viewer.js中，拿到响应文本后直接赋值给这个元素的内容（推荐用textContent，纯文本场景更安全）：

twitch.onAuthorized(function(auth) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://你的CORS代理后的文本文件URL', true);
  xhr.onload = function() {
    if (this.status >= 200 && this.status < 400) {
      // 找到DOM元素并插入文本
      var textContainer = document.getElementById('text-content');
      if (textContainer) {
        textContainer.textContent = this.responseText;
      } else {
        console.error('未找到text-content元素，请检查HTML结构');
      }
    } else {
      console.error('文本文件请求失败，状态码：', this.status);
    }
  };
  xhr.onerror = function() {
    console.error('请求文本文件时发生网络错误');
  };
  xhr.send();
});

如果担心DOM未就绪，可以把逻辑包裹在DOMContentLoaded事件里，确保元素已渲染：

document.addEventListener('DOMContentLoaded', function() {
  twitch.onAuthorized(function(auth) {
    // 这里放XMLHttpRequest请求和DOM插入逻辑
  });
});

要是你用了jQuery，还能简化代码：

twitch.onAuthorized(function(auth) {
  $.get('https://你的CORS代理后的文本文件URL', function(data) {
    $('#text-content').text(data);
  }).fail(function() {
    console.error('加载文本失败');
  });
});

二、能否让object标签仅显示纯文本？ #

不推荐用<object>来展示纯文本，它的设计目标是嵌入PDF、Flash、外部页面这类资源，浏览器会自动调用对应引擎渲染，很难强制它以纯文本格式展示，而且在Twitch扩展环境里还可能遇到权限或兼容性问题。还是用JS获取文本后插入DOM的方式更可靠。

三、是否必须用HTTPS加载文本文件？ #

是的，必须使用HTTPS。因为Twitch扩展运行在HTTPS环境下，浏览器的混合内容策略会阻止从HTTP加载任何资源；再加上你提到的Twitch开发者工具不支持file://协议，所以你必须把文本文件放在支持HTTPS的服务器上（比如你用的Box加上CORS代理，只要代理地址是HTTPS的就可以）。

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