42

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?

4
  • 1
    The engine won't parse them if you preface your line of code with 4 consecutive spaces.
    – esqew
    Jun 14, 2011 at 18:28
  • stackoverflow.com/editing-help
    – Matt Ball
    Jun 14, 2011 at 18:31
  • You should format your code by indenting it with four spaces.
    – SLaks
    Jun 14, 2011 at 18:31
  • 3
    HTML can include img, but can't include txt... <facepalm> Sep 16, 2015 at 8:17

6 Answers 6

45

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.

2
  • is possible do this 1) without actually showing this on web page and 2) pass the content into javascript (I just want to pass some text to javascript without using any web server and sophisticated things like jQuerry, or other stuff) Apr 28, 2017 at 19:14
  • @prokop-hapala sadly it is not possible to pass file on local machine to javascript for security reasons. You need a web server for that.
    – Klesun
    Apr 29, 2017 at 8:21
18

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

1
  • 2
    Similarly, you could also embed an html file.
    – PPR
    Sep 8, 2021 at 3:45
13

It can be done with HTML <embed> or <object> tags, Javascript, or PHP/ASP/other back-end languages.

PHP (as example of server-side language) is the the way I've always done it:

<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

4
  • 2
    Or with SSI en.wikipedia.org/wiki/Server_Side_Includes ... but this is not much seen today.
    – leonbloy
    Jun 14, 2011 at 18:33
  • @leonbloy - Interesting - never even heard of that before! :)
    – Dave
    Jun 14, 2011 at 18:41
  • well, It's the correct way - a bit hectic because of the same-sever-policy of js. In my case I'd have to create a special php code in the server
    – Boaz
    Jun 14, 2011 at 18:51
  • 4
    What nonsense. Of course you can do this with HTML. Use the <embed> or <object> tags.
    – user1322720
    Apr 4, 2015 at 12:00
4

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();
1
3

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.

3

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);

Not the answer you're looking for? Browse other questions tagged or ask your own question.