Tag to Insert HTML

Topic

New Reply

This seems like it ought to be easy (and it probably is!), but I can find a reference that tells me how to do it…

I’d like to include a file reference in my HTML code that will load additional HTML code to replace the reference.

Something like:

If xxx.htm contains:

This is a test.

Then the first HTML above would be processed as if it were:

This is a test.

Is there a way to do this (what is “tag” and what is the proper syntax)?

Thanks,

Reply | Quote

Replies

Hi Tom

It must be the lateness of my hour…. can I just clarify?

Say I have a html file called index.htm, in its code you have a line that references xxx.htm. Are you saying that you want index.htm to “look” at the content of xxx.htm, see if it has the syntax This is a test. inside its code and if it does change the tags in index.htm to

This is a test.?

Reply | Quote

Jerry,

Basically, yes. I’d like to leave the html content of index.htm unchanged. However, when I change xxx.htm, I’d like the appearance of index.htm to change to reflect the new content of xxx.htm.

Thanks for you help on this.

Reply | Quote

Hi Tom

There has been a recent thread about Inserting a page of links post 594,261 and we finally came to the conclusion that iframes was the answer for the Lounger. However, last night I was just about to complete a little applcation for you using a javascript include that imported html content to your page if you were unable to get access to server side includes. I am at wotk at the moment (having a spot of afternoon tiffin ). I would like to show you my little solution (only works on IIS so will publish it on my site for demo purposes and send the files to you)

I get back in the next few hours after I get home.

Reply | Quote

What a treat! I’ll look forward to your trying your “little application.” Thanks so much.

I’ve tried the approach and it seems to serve the purpose, but I’d like to try your alternative (the WIDTH and HEIGHT requirements of IFRAME seem to constrain me a little, but the scroll bars may come in handy if I continue to do this in other places).

Thanks again.

Reply | Quote

iframes ….yyyuuukkk hate the things, you just need to set your attributes up for it correctly:

just adjust it to how you want it using pixels or percentage.

Don’t get too excited about the “application” but I suppose by definition it is: “Application-Generic term for any software program that carries out a useful task”

Reply | Quote

Hi Tom

Well I have found my little gizmo wasn’t really fit for purpose, sorry. On the other hand I have done a little bit of searching and found a method of being able to click a link and see contents of another page in the main page using javascript.

Click here for a demo I palced a text file and a html file to show it can be done

and here for the download from the creator.

I reckon with a little imagination you could have a series of links viewing various files…an alternative but maybe useful….enjoy

Reply | Quote

How about adding return false; to the end of your onclick event handlers so Firefox doesn’t immediately reload the original page? (I didn’t try in IE, perhaps IE behaves differently by default.)

Reply | Quote

I think I did this right. I did

Click Me Load latin.htm it just disabled the link

then

Click Me Load latin.htm and no change

have I messed up the syntax or missed your point?

Reply | Quote

The latter form should prevent Firefox from following the href=”#” immediately after executing the script, which is what causes the page to reload (thus clearing the effect of the script). Is it possible this only affects me??

Reply | Quote

How about something like this?

Paragraph 1

Paragraph 2

Click Me Load latin.htm

Click Me to Load fox.txt

(Rather than the current page body. Haven’t tested, but the node reference seems to be needed for an in-place replacement.)

Reply | Quote

I tweaked the guy’s script a bit and posted another demo here: http://carbocoma.com/db_tut/testinclude.html%5B/url%5D.

Reply | Quote

Great Stuff Jeff

I haven’t heard from Tom so not sure if we have his thread but this is a nice option to tweak with. BTW I have added your previous code to my page as well

Reply | Quote

Jerry,

Thanks for the ideas… The web-design/maintenance tool I’m using does not appear to support nor #include. Otherwise (if I were designing from scratch), these certainly appear to be exactly what I was looking for.

Thanks again.

Reply | Quote

I don’t know if you have been checking this thread, or waiting for a notification… stuff has happened.

Although the script above waits for a click, you also could run the script when the page loads using something along these lines —

window.onload = function () { include('myfile.html','targetelement'); }

— in the section of your page’s section. There might be a slight delay in rendering, but hopefully it will be too short to be bothersome. Actually, I didn’t test this, but in theory it should work.

Reply | Quote

As I mentioned in the reply to Jerry, I don’t think I have at my disposal with the web design tool I’m using. I’ll try your “click” code to see if that works (of course, my preference would be to have the external html inserted automatically). does seem to work for me, although I have to futz with the parameters (fortunately the html I’m inserting does not change dimensions much so this works okay once it’s set up).

Thanks,

Reply | Quote

Are you using one of those online web page generators? They are not very flexible… If you are using something on your own computer, there almost certainly is a way to insert any code you like. Either through a dialog or through direct editing of the HTML code that the tool is creating for you.

Reply | Quote

Yes, I’m using soEditor Pro (version 2.1) which is imbedded in the web page generator software. It does permit viewing and editing of “raw” HTML code, but some things (such as #include) seem to be ignored ( does work).

Reply | Quote

HTML does not really have a flexible approach to this. Historically web authors have used the tag to display the contents of a one HTML document in another one. Now it is possible to use the tag the same way. If you want to “assemble” the two documents into one on the server, you can use server-side includes (SSI).

Reply | Quote

Thanks, I’ll look into using the or tag to see if one of these works for me.

Reply | Quote

What about using SSI (server side include)? It sounds very close to what you need. You can include it anywhere and it’s used to insert any HTML into where ever you put the #INCLUDE statement. It’s handy for redudnant code or menus, etc. You may have to change slightly the layout you listed but it’ll work (assuming your host lets you use it, mine does so it’s not an problem but I’ve heard others may limit you). It has other features as well, not just for directly insertion of a file’s contents.

So you’d add a line such as anywhere you want and the server will go fetch this .html file and insert it exactly where this line goes. The .html file can contain as little or as much as you want.

I can’t put the syntax in this post as The Lounge deletes it but there is a #include statement that points to a file. This file is located where your other .html files are (and can be called anything, like .txt or .code or whatever). The server fetches that file, and inserts its contents directly into where ever this statement is in your .html page. If then sends the completed page to the user (the user sees the result of the file insertion).

I found this nice tutorial on it, http://www.really-fine.com/tutorial_ssi.html%5B/url%5D (jump down to the “include file” section).

Deb

Reply | Quote