时间戳

首页 > 解决方案 > 如何将文本文件添加到 javascript 中，然后添加到 html 中？（在 html 中显示来自 javascript 的文本）

javascript - 如何将文本文件添加到 javascript 中，然后添加到 html 中？（在 html 中显示来自 javascript 的文本）

问题描述

我想将一个文本文件放入一个 javascript 函数中，然后以某种方式在 html 中显示该函数。

javascript 不能在 html 文件中；它必须从文件外部引用，例如：

这是我正在尝试做的事情的图片（我没有足够的代表点）：

https://i.ibb.co/xGxw1bm/1.png

我努力了：

  1. 我尝试使用“XMLHttpRequest”通过将我的文本文件上传到 Dropbox 来尝试在前端 html 中显示文本文件，这样我就可以使用“https”方法而不是“file://”进行通信，因为那不是在 twitch 开发者装备中工作
const Http = new XMLHttpRequest();
const url='  https://cors-anywhere.herokuapp.com/https://app.box.com/s/zkt7pbsv0cnnogafcxq8n5elmc9plxbz';
\\later in the code; because I didn't know where to put the rest of the http commands so I put them in the twitch.onAuthorized function which needs to be ran in this script anyway. I don't know what it does but it needs to be there and since its already a function I figured it would be better there. (Unless someone can make a function where all the https stuff is in one function.)

twitch.onAuthorized(function (auth) {
  // save our credentials
  token = auth.token;
  tuid = auth.userId;

Http.open("GET", url);
Http.send();
Http.onreadystatechange=(e)=>{
console.log(Http.responseText);
  setAuth(token);
  $.ajax(requests.get)
}
});
  1. 我尝试了 document.getelement 的东西，但这并没有向我解释如何将它作为文本放在 html 中：document.getElementById("demo").innerHTML

我在这方面看到的一切都说你可以使用标签进行操作，但我还没有看到这个 document.get thingy 在另一个 javascript 文件中的一个例子，他们必须将它引用到 html。我总是在与 html 相同的文件中看到它。

在不使用按钮的情况下，我可以使用什么函数将该函数提取到 html 文件中？我只是希望它像对象标签或 iframe 标签一样显示。

  1. 我尝试使用对象标签....它似乎工作但是......我注意到它像 html 文件一样拉网站。无论如何直接将文本文件链接到对象标签，但只显示文本数据？我必须将我的文本上传到安全的 https 吗？我什至可以从网络上提取文本文件而不将其拉入 html 吗？

这是html文件的确切内容：（注意：这是测试，因此html文件中的任何单词都不重要。我只是想学习如何从另一个javascript文件或backend.js javascript文件中将文本放在此处。什么标签或参考我可以使用将 javascript 中的函数放入此处而无需按钮吗？只是在屏幕上我需要文本。：

<!DOCTYPE html>
<html>
<head>
    <title>Viewer Page</title>
</head>
<body style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
    <div id="app" class="full-height"></div>
    <script src="twitch-ext.min.js"></script>
    <script src="jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>
    <script src="viewer.js" type="text/javascript"></script>
    <h2>Hello, World!</h2>
    <p>Would you care to cycle a color?</p>
<object type="text/html" data="https://www.w3.org/TR/PNG/iso_8859-1.txt"></object>
</body>
</html>

这是 viwer.js（这是获取文本文件的 javascript 所在的位置）：

const Http = new XMLHttpRequest();
const url='  https://cors-anywhere.herokuapp.com/https://app.box.com/s/zkt7pbsv0cnnogafcxq8n5elmc9plxbz';

let token = '';
let tuid = '';

const twitch = window.Twitch.ext;

// create the request options for our Twitch API calls
const requests = {
  set: createRequest('POST', 'output'),

};

function createRequest (type, method) {
  return {
    type: type,
    url: location.protocol + '//localhost:8081/musicoutput/' + method,
    success: updateBlock,
    error: logError
  };
}

function setAuth (token) {
  Object.keys(requests).forEach((req) => {
    twitch.rig.log('Setting auth headers');
    requests[req].headers = { 'Authorization': 'Bearer ' + token };
  });
}

twitch.onContext(function (context) {
  twitch.rig.log(context);
});

twitch.onAuthorized(function (auth) {
  // save our credentials
  token = auth.token;
  tuid = auth.userId;

Http.open("GET", url);
Http.send();
Http.onreadystatechange=(e)=>{
console.log(Http.responseText);
  setAuth(token);
  $.ajax(requests.get)
}
});

function updateBlock (hex) {
  twitch.rig.log('Updating music info');

}

function logError(_, error, status) {
  twitch.rig.log('EBS request returned '+status+' ('+error+')');
}

function logSuccess(hex, status) {
  twitch.rig.log('EBS request returned '+hex+' ('+status+')');
}

标签： javascripthtml

解决方案

推荐阅读