How to include a code fragment from a text file into html?

Question

Is there a simple way (or what could be the simplest way) to include a html-code fragment, which is stored in a text file, into a page code?

E.g. the text file fragment.txt contains this:

<b><i>External text</i></b>

And the page code should include this fragment "on the fly". (Without php ...?)

http://stackoverflow.com/questions/6470567/jquery-load-txt-file-and-insert-into-div P.S. even simpler with php, imho... — sinisake, Jan 11 '17 at 14:02
may be this cure is `iframe`: ``. I'm not sure can it work "no the fly". — Banzay, Jan 11 '17 at 14:23

score 1 · Accepted Answer · edited May 23 '17 at 12:24

1

The Javascript approach seems to be the preferred one. But with the examples below you possibly can get problems with cross origin requests (localhost to internet and vice versa) or you can have security problems when including external scripts which are not served via HTTPS.

An inline solution without any external libraries would be:

<!DOCTYPE html>
<html>
  <body>
    <div id="textcontent"></div>

    <script>
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      document.getElementById('textcontent').innerText = xhttp.responseText;
    };
    xhttp.open("GET", "content.txt", true);
    xhttp.send();
    </script>
  </body>
</html>

Here you need a file content.txt in the same folder as the HTML file. The text file is loaded via AJAX and then put into the div with the id textcontent. Error handlings are not included in the example above. Details about XMLHttpRequest you can find at http://www.w3schools.com/xml/xml_http.asp.

EDIT:

As VKK mentioned in another answer, you need to put the files on a server to test it, otherwise you get Cross-Origin-Errors like XMLHttpRequest cannot load file:///D:/content.txt. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

edited May 23 '17 at 12:24

Community

1
1

answered Jan 11 '17 at 15:06

hilderonny: Hm ... Your code in a test.htm and a content.txt (containing only the line from my OP), both on the server, in the same directory ... and the result is a blank page. (Such a simple desire and so difficult to meet! ;-) I think, I should give up! ...) – newbieforever Jan 11 '17 at 15:48
@newbieforever What browser are you using? To be sure there were no typos or anything like that, I tested both hilderonny's code and my code and they both work. – VKK Jan 11 '17 at 15:59
VKK: I copyed exactly the code from hilderonny to a test.htm, I saved the html code line from my OP in a content.txt, both files are on the server (temporarily: http://bez.one/test.htm; content.txt in the same directory). My favorite browser (K-meleon) shows nothing. PS: Now I see that IE and Edge shows the content of the content.txt as it is, `External text`, i.e. not interpreted as html snippet. – newbieforever Jan 11 '17 at 16:28
I do not know the K-meleon browser and cannot say, why it does not work. In Chrome/Firefox/IE/Edge and Opera the code works, sorry for that. To have the HTML in the external file rendered correctly, use `document.getElementById('textcontent').innerHTML = xhttp.responseText;`. The `innerHTML` attribute makes the HTML render correctly, see http://www.w3schools.com/jsref/prop_html_innerhtml.asp. – Jan 11 '17 at 18:39
hilderonny: This last point (innerHTML instead of innerText) seems to be the solution! It works correctly now, locally and on the server, even with my K-meleon!!! Thank you so much! (Is this a browser-secure solution?) (I have to take care that the page is loaded on every visit (no cache) to be updated from the content.txt.) – newbieforever Jan 11 '17 at 21:14

VKK · Answer 2 · 2017-01-11T15:34:50.103

You need to use Javascript to do this (or perhaps an iframe which I would avoid). I'd recommend using the JQuery framework. It provides a very simply DOM method (load) that allows you to load the contents of another file into an HTML element. This is really intended for AJAX calls, but it would work in your use case as well. The fragment.txt would need to be in the same server directory as the html page (if it's in a different directory just add on a path).

The load method is wrapped in the $(document).ready event handler since you can only access/edit the contents element after the DOM (a representation of the page) has been loaded.

Most browsers don't support local AJAX calls (the load method uses AJAX) - typically the HTML and txt files would be uploaded to a server and then the html file would be accesed on the client. Firefox does support local AJAX though, so if you want to test it locally use Firefox.

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
    <script>
        $(document).ready(function() {
            $("#contents").load("fragment.txt");
        });
    </script>
</head>
<body>

<div id="contents"></div>

</body>
</html>

VKK: Your code in a test.html and my fragment.txt in the same directory (both locally on my computer, in this testing phase) should work? At the moment it does not... Still testing... — newbieforever, Jan 11 '17 at 14:51
Updated my code and answer and I tested this on both a server and locally in Firefox, so I'm sure it works. — VKK, Jan 11 '17 at 15:56

marko_b123 · Answer 3 · 2017-01-11T14:13:48.813

-2

With javascript. I use it. Example:

<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>

<body>

<div w3-include-html="content.html"></div>

<script>
w3IncludeHTML();
</script>

</body>
</html>

edited Jan 11 '17 at 14:13

answered Jan 11 '17 at 14:04

marko_b123

300
2
14

marko_b123: This would be fine, but your code seems not to work... I continue testing... – newbieforever Jan 11 '17 at 14:30

How to include a code fragment from a text file into html?

3 Answers3