Embed text files in html

I would like to display the content of a text file inside a HTML page ( .rtf , .txt , .log . ) stored on the server. I have tried with embed but seems that doesn't work.

There is a "simple" method (or tag) to do that or I should scan for the content and print it with, for example, jQuery?

asked Oct 11, 2013 at 17:48 6,188 3 3 gold badges 41 41 silver badges 67 67 bronze badges @Dvir with object it starts automatically the download without showing me the content of the file Commented Oct 11, 2013 at 20:54 Do you mean embedding or inclusion? RTF or plain text? Different things. Commented Oct 11, 2013 at 21:12

@JukkaK.Korpela displaying the content of the file. All kind of "simples" text format (.rtf,.txt,.log. )

Commented Oct 11, 2013 at 21:15 Then the question is too broad. Commented Oct 11, 2013 at 21:39

@CraigHicks if I remember correctly what I did 5 years ago ;-) with the embed tag it started the download of the file instead displaying the content

Commented May 15, 2018 at 20:02

7 Answers 7

Something like this should do it:

60.7k 16 16 gold badges 120 120 silver badges 165 165 bronze badges answered Oct 11, 2013 at 17:55 616 2 2 gold badges 8 8 silver badges 21 21 bronze badges

with Chrome unfortunely doesn't work, it seems that starts automatically the download without showing the content

Commented Oct 11, 2013 at 20:49 The code posted works well. Similar code for an RTF file might not. Commented Oct 11, 2013 at 21:13 @JukkaK.Korpela tested with a .rtf file Commented Oct 11, 2013 at 21:16

This works in Chrome 63. However, you do have to wait for the document to load. E.g., from within a window.onload event, do data.contentDocument.body.textContent.trim() , where data is a reference to your object element. Also, you probably want zero width and height on your object element (but not style="display:none" — that will break it).

Commented Dec 11, 2017 at 4:06

Didn't work for me. I think modern browsers have stricter securities and have blocked this. What I do is store data in a javascript file and load it in

Commented Feb 28, 2021 at 18:52

Using a $.ajax() function with a .append() function inside you can easily grab the contents of a text document and display them on the page. Something along the lines of what you see below. Preform this on load of the page to immediately load the file in with the rest of the page.

$.ajax( < async:false, url: 'folder/file.txt', dataType: 'text', success: function(data) < $('element').append(data); >>);

Play around with it a little bit to get the correct result you are looking for. You could also use PHP but unless you really need to parse the data, PHP is a bit overkill in this situation.

answered Oct 11, 2013 at 18:33 700 4 4 silver badges 13 13 bronze badges This is inclusion, not embedding. Maybe what was actually wanted, but not what was asked. Commented Oct 11, 2013 at 21:07

Ha sorry damoiser, but glad it works for you. You could also use a $.get() request, I just figured I'd give you the original ajax request that has more options you can control.

Commented Oct 14, 2013 at 13:39

An iFrame might be useful in this context.

answered Mar 31, 2021 at 20:34 John Henry John Henry 2,979 2 2 gold badges 21 21 silver badges 22 22 bronze badges

I upvoted this solution as it is much more flexibel and commonly-used, than the object html element. It can also be used as overlay and has scrollbars, what is off-topic.

Commented May 2, 2021 at 13:59

is only for plugin content (flash, etc). Try getting content using ajax, then write it with document.write ; Or use the include tag in a back end language (PHP, ASP, etc)

answered Oct 11, 2013 at 17:54 423 3 3 silver badges 12 12 bronze badges

+1 to give me the right direction to work, Keith V wins the best answer because he gives to me a more complete solution than yours

Commented Oct 11, 2013 at 20:52

NOTE: apologies for the similarity to Keith V's answer and the fact he mentioned get requests - I only noticed his comment about get requests after posting my answer.

I find the following structure helpful, and allows me to style the text as a span rather than having to wield an object:

function append_url_content_to_div(url)< $.get(url, function(returned_data)< console.dir(returned_data); var content = ''+returned_data+''; $("#appendee_div").append(content); >); > append_url_content_to_div("https://dl.dropbox.com/s/euk874r7zd1cx0d/example_text.txt?dl=0"); //note that it has to be "dl." not "www." in dropbox

It works for me for dropbox content, but I don't see why it wouldn't work for publicly viewable text files. As you can see in the code, you need jquery.