|
Сообщение от karaul
|
|
А есть пример такой реализации?
|
Ну с комментариями это я поторопился.
Это прокатывало, когда произвольные данные надо было помещать в
<script>
/*
Тут произвольные данные
*/
</script>
Но для внешних файлов набросал такой примерчик
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<title> LOAD DATA </title>
</head>
<style>
#out {
position:relative;
width: 300px;
height:400px;
overflow-y:auto;
border: 1px red solid;
}
</style>
<body >
<pre id=out></pre>
<button id=rd1>read1</button>
<button id=rd2>read2</button>
<button id=rd3>read3</button>
<script>
var data;
const read = (fn) => {
const uf = './data/'+ fn;
const sf = document.createElement('script');
return new Promise (res => {
sf.onload = () => {
sf.remove();
res(data)
}
sf.src = uf;
document.head.append(sf)
})
}
document.getElementById('rd1').addEventListener('click', async () => {
const text = await read('file1.dat')
// Тут какая то обработка. Пока так
document.getElementById('out').textContent += text;
})
document.getElementById('rd2').addEventListener('click', async () => {
const text = await read('file2.dat')
// Тут какая то обработка. Пока так
document.getElementById('out').textContent += text;
})
document.getElementById('rd3').addEventListener('click', async () => {
const text = await read('file3.dat')
// Тут какая то обработка. Пока так
document.getElementById('out').textContent += text;
})
</script>
</body>
</html>
В директории с этим файлом создайте поддирескторию data
И в нее три файла
file1.dat
data=`
Это файл file1.dat
12345
67890
09876
54321
`;
file2.dat
data=`
Это файл file2.dat
qwert
yuiop
asdfg
hjklz
`;
file3.dat
data=`
Это файл file3.dat
йцуке
нгшщзх
фывап
ролджэ
`;
В этих файлах между первой строкой
data=`
и последней
`;
Могут размещаться произвольные текстовые данные, которые можно получить и потом как то обрабатывать