Я пытался создать прокрутку с помощью JavaScript, чтобы добавить в поток игры, который выделяет самых последних подписчиков, подписчиков и т. Д. c. Я использую StreamLabels, который захватывает теги игрока самых последних и помещает данные в текстовый файл, помеченный для каждого. Чтобы начать строить это, мне нужно было сначала убедиться, что у меня есть скрипт, который может извлекать текст и печатать данные файла на веб-странице. Однако каждый найденный мной код Javascript не выведет данные на экран.
Сначала я попытался ( Как прочитать локальный текстовый файл? ):
function readTextFile(file)
{
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
alert(allText);
}
}
}
rawFile.send(null);
}
и добавили readTextFile("follower.txt"); к коду веб-страницы. После выполнения страница была полностью пустой для Chrome, IE и Edge.
Далее я попробовал ( Как загрузить содержимое текстового файла в переменную javascript? ):
var client = new XMLHttpRequest();
client.open('GET', '/follower.txt');
client.onreadystatechange = function() {
alert(client.responseText);
}
client.send();
, а также обновленный 2019 код, найденный в комментариях:
fetch('follower.txt')
.then(response => response.text())
.then((data) => {
console.log(data)
})
Каждый закончился так же, как и первый: с пустым экраном.
Наконец, я отказался от чтения из текста с помощью Javascript и начал глядя на <marquee>, который, насколько я знаю, является устаревшим и архаичным c способом сделать это. Код , который я нашел , включал немного Javascript для прокрутки и HTML / CSS для управления текстом. Я также включил <object> тянуть текстовый файл в код. Я закончил с:
<!DOCTYPE html>
<html>
<head>
<title>TITLE</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.5.0/jquery.marquee.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script>
$(function(){
$('.marquee').marquee({
allowCss3Support: true,
css3easing: 'linear',
easing: 'linear',
delayBeforeStart: 1000,
direction: 'left',
duplicated: true,
duration: 25000,
gap: 20,
pauseOnCycle: false,
pauseOnHover: false,
startVisible: false
});
});
</script>
<style type="text/css">
.marquee span {
margin-right: 100%;
height: 30px;
}
.marquee p {
white-space:nowrap;
margin-right: 1000px;
}
</style>
</head>
<body>
<div class="marquee" height=20px>
<p>Recent follower: <object type="text/html" data="follower.txt"></object> // Recent donation: <object type="text/html" data="follower.txt"></object><p>
</div>
</body>
</html>
Теперь этот код работает, однако <object> делает некоторые странные вещи с интервалом и случайно не виден, пока второй объект не появится на экране. Кроме того, между текстом Recent follower: и <object> имеется вертикальное расстояние не менее 40 пикселей, причем текст является довольно низким по сравнению с текстовыми данными (см. Изображение ниже) 
.
Я знаю, что с каждым из приведенных выше кодов что-то не так, поэтому любая помощь будет принята с благодарностью. Я предполагаю, что использование <object> может быть причиной root пробелов. Я также планировал попытаться сделать преобразование текста, чтобы добавить к этому, но без какой-либо полезной функциональности, не уверен, как это будет go.