如何将文本文件添加到javascript中,然后添加到html中? (以html格式显示来自javascript的文本)

时间:2019-04-19 15:39:26

标签: javascript html

我想将文本文件放入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

我在此看到的所有内容始终表明您可以使用标签进行操作,但是我没有看到一个示例,该文档在另一个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+')');
}

0 个答案:

没有答案