I am making a web page and I want to always take a txt that I have in the root folder and load it in a variable to then manipulate the data of that txt without having to load it with a control input. That this route is always fixed and that it is the first thing to do when loading the page
You can use an XMLHttpRequest object to read the file that you have in the same directory of your page, but if you do it in local you will not be able to test it with chrome because it will produce an error of Cross-origin resource sharing, you can test it with internet explore if you do not have ssl implementing on your server, this is a functional example:
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
var contenido_texto;
var tu_variable;
if(navigator.appName.search('Microsoft')>-1) { contenido_texto = new ActiveXObject('MSXML2.XMLHTTP'); }
else { contenido_texto = new XMLHttpRequest(); }
function leertxt() {
contenido_texto.open('get', 'data1.txt', true);
contenido_texto.onreadystatechange = ver;
contenido_texto.send(null);
tu_variable = contenido_texto.responseText;
}
function ver() {
if(contenido_texto.readyState==4) {
document.getElementById('midiv').innerHTML = contenido_texto.responseText;
}
}
</script>
</head>
<body onload="leertxt();ver();">
<div id="midiv"></div>
</body>
</html>
It is not possible to load files from your hard drive using only the browser, if you want to access filesystem you should use something like Node.js for example.
You could mount your file as json in https://tudominio.com/archivo.json , then load it with window.fetch when loading your page and then modify the data according to your needs.
window.fetch('/archivo.json')
.then(response => response.json())
.then(response => /** manipular response **/ )
For this you must configure a local server (if you open the index.html locally you will receive an error Cross origin requests, for this it must be a server) with the following files:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="app.js"></script>
</body>
app.js
$(document).ready(function () {
$.ajax({
url: "ejemplo.txt",
context: document.body,
crossDomain: true
}).done(function (response) {
//Datos de tu archivo en la variable response
document.write(response);
});
});
example.txt
Hola Mundo