making a paragraph in html contain a text from a file

Question

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?

The engine won't parse them if you preface your line of code with 4 consecutive spaces. — esqew, Jun 14 '11 at 18:28
You should format your code by indenting it with four spaces. — SLaks, Jun 14 '11 at 18:31

Klesun · Answer 1 · 2018-02-12T23:38:22.033

44

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.

edited Feb 12 '18 at 23:38

answered Mar 27 '16 at 00:31

Klesun

12,280
5
59
52

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) – Prokop Hapala Apr 28 '17 at 19:14
@prokop-hapala sadly it is not possible to pass file on local machine to javascript for [security reasons](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy). You need a web server for that. – Klesun Apr 29 '17 at 08:21

score 18 · Answer 2 · answered Oct 19 '19 at 16:12

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

answered Oct 19 '19 at 16:12

Ronan Leonard

322
3
8

2

Similarly, you could also embed an html file. – PPR Sep 08 '21 at 03:45

Dave · Accepted Answer · 2022-01-28T16:40:17.293

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

edited Jan 28 '22 at 16:40

answered Jun 14 '11 at 18:29

Dave

28,833
23
113
183

2

Or with SSI http://en.wikipedia.org/wiki/Server_Side_Includes ... but this is not much seen today. – leonbloy Jun 14 '11 at 18:33
@leonbloy - Interesting - never even heard of that before! :) – Dave Jun 14 '11 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 '11 at 18:51
4

What nonsense. Of course you can do this with HTML. Use the `` or ` – Apr 04 '15 at 12:00

score 4 · Answer 4 · answered Jun 14 '11 at 18:36

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

Per https://stackoverflow.com/a/15587998, I needed to register the onreadystatechange callback before calling open(). I also needed `file.send();`. — Martin Dorey, Aug 12 '18 at 01:22

score 3 · Answer 5 · answered Nov 08 '18 at 18:08

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

score 3 · Answer 6 · answered Jun 14 '11 at 18:31

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.

making a paragraph in html contain a text from a file

6 Answers6

Linked

Related