I have an html paragraph (inside a div) in which I want to display a simple fixed text. The text is a bit long so I'd rather the text will be in a seperate txt file.
something like
<div><p txt=file.txt></p></div>
Can I do something like that?
I have an html paragraph (inside a div) in which I want to display a simple fixed text. The text is a bit long so I'd rather the text will be in a seperate txt file.
something like
<div><p txt=file.txt></p></div>
Can I do something like that?
You'll want to use either JavaScript or a server-side language like PHP, ASP...etc
(supposedly can be done with HTML <embed>
tag, which makes sense, but I haven't used, since PHP...etc is so simple/common)
Javascript can work: Here's a link to someone doing something similar via javascript on stackoverflow: How do I load the contents of a text file into a javascript variable?
PHP (as example of server-side language) is the easiest way to go though:
<div><p><?php include('myFile.txt'); ?></p></div>
To use this (if you're unfamiliar with PHP), you can:
1) check if you have php on your server
2) change the file extension of your .html file to .php
3) paste the code from my PHP example somewhere in the body of your newly-renamed PHP file
<embed>
or <object>
tags.
– user1322720
Apr 4 '15 at 12:00
You can do something like that in pure html using an <object>
tag:
<div><object data="file.txt"></object></div>
This method has some limitations though, like, it won't fit size of the block to the content - you have to specify width
and height
manually. And styles won't be applied to the text.
You can use a simple HTML element <embed src="file.txt">
it loads the external resource and displays it on the screen no js needed
Javascript will do the trick here.
function load() {
var file = new XMLHttpRequest();
file.open("GET", "http://remote.tld/random.txt", true);
file.onreadystatechange = function() {
if (file.readyState === 4) { // Makes sure the document is ready to parse
if (file.status === 200) { // Makes sure it's found the file
text = file.responseText;
document.getElementById("div1").innerHTML = text;
}
}
}
}
window.onLoad = load();
file.send();
.
– Martin Dorey
Aug 12 '18 at 1:22
Here is a javascript code I have tested successfully :
var txtFile = new XMLHttpRequest();
var allText = "file not found";
txtFile.onreadystatechange = function () {
if (txtFile.readyState === XMLHttpRequest.DONE && txtFile.status == 200) {
allText = txtFile.responseText;
allText = allText.split("\n").join("<br>");
}
document.getElementById('txt').innerHTML = allText;
}
txtFile.open("GET", '/result/client.txt', true);
txtFile.send(null);
I would use javascript for this.
var txtFile = new XMLHttpRequest();
txtFile.open("GET", "http://my.remote.url/myremotefile.txt", true);
txtFile.onreadystatechange = function() {
if (txtFile.readyState === 4 && txtFile.status == 200) {
allText = txtFile.responseText;
}
document.getElementById('your div id').innerHTML = allText;
This is just a code sample, would need tweaking for all browsers, etc.