Loading an HTML file into a DIV with a link

Question

There are several topics on this, but none that completely answer my question.

I would like to be able to have a link which loads a whole HTML file into a DIV.

This, for example, will load just text into my "MainBack" DIV. It works fine:

<a href="#computing" onclick="document.getElementById('MainBack').innerHTML = '<p>1</p>';">Computing</a>

but I would like to load an entire file into it like this:

<a href="#computing" onclick="document.getElementById('MainBack').innerHTML = 'HTML FILE';">Computing</a>

Any advice? I'm pretty new to this!

Myles Gray · Answer 1 · 2011-02-13T23:58:31.807

10

You can use an <iframe> to do just that:

<iframe src="link.html" width="100%" height="300"></iframe>

Live Demo

Code:

<a href="#computing" onclick="document.getElementById('MainBack').innerHTML = '<iframe src=\'http://www.google.com\' scrolling=\'no\' frameborder=\'0\' width=\'100%\' height=\'600px\'></iframe>'">Computing</a>

Or you could use lightbox to do it in a really pretty manner...

It will display; photos, videos, HTML... basically anything you want.

edited Feb 13 '11 at 23:58

answered Feb 13 '11 at 21:28

Myles Gray

8,711
7
48
70

How should this be formatted? Should I keep it inside '' ? If so, it doesn't seem to work. – Mark Brewerton Feb 13 '11 at 21:37
@MarkBrewerton Are you loading an External file or simply a load of HTML code? – Myles Gray Feb 13 '11 at 21:38
A load of HTML code, it just seems tidier to load an external file. – Mark Brewerton Feb 13 '11 at 21:46
Yeah you are right, best bet is to put it into an external HTML file, then call the `` with the onclick event, that or use lightbox which then gives you a nice translucent pop-up – Myles Gray Feb 13 '11 at 21:48
Out of interest, how would I just load some HTML? I seem to be able to load something like
1
but not stuff like YouTube embeds. – Mark Brewerton Feb 13 '11 at 21:49
and is this how I should do an iFrame? '">Computing That doesn't seem to work. The link looks like this if I do: '">Computing – Mark Brewerton Feb 13 '11 at 21:50
`Computing` – Myles Gray Feb 13 '11 at 21:52
Do you know how to make the iFrame fill the DIV and remove the border/scroll bars? – Mark Brewerton Feb 13 '11 at 22:04
@MarkBrewerton - Sure mam use this: `Computing` change the height to whatever you want – Myles Gray Feb 13 '11 at 23:52

Paulo Scardine · Answer 2 · 2015-10-19T14:04:20.417

Using the jQuery ajax API you can grab the content of a particular tag inside the document from some URL:

<a href="#computing" 
   onclick="$('#MainBack').load('/path/file.html body')"
>
    Computing
</a>

Important:

#MainBack is the ID of the placeholder tag in your parent document
/path/file.html id the URL for the document you want to load data from
body is the tag holding the content you want to load.

What can go wrong:

check #1 above, does your parent document has a tag with the exact ID you are using in the ajax call?
check #2, can you load the URL in a separate browser window?
if you can load the URL, use the "view source" option to inspect the HTML source and make sure you have the selector you are using in #3 above. Perhaps the content you want is being generated dynamically from JavaScript instead of being served by the HTTP server, in this case use the iframe solution from the other answer.
check the JavaScript console and look for some message about cross-domain issues, CSRF, CORS, etc. If the content is from another domain you may stumble upon the browser security rules; this is a whole new can of worms and I will not cover the possible solutions here, take the error message from the console and google for it.

Have you loaded jQuery in the HTML header section? Please read docs and see examples in the given link. — Paulo Scardine, Feb 13 '11 at 21:38
It should work. This one is much cleaner solution than the iFrame. — Vikas, Oct 19 '15 at 12:31

score 1 · Answer 3 · answered Feb 13 '11 at 21:35

1

<a href="#computing" onclick="document.getElementById('MainBack').innerHTML = '<iframe src=\'http://www.google.com\'></iframe>'">Computing</a>

--> Demo <--

answered Feb 13 '11 at 21:35

Shaz

15,637
3
41
59

score 0 · Answer 4 · edited Jan 14 '20 at 10:17

You can load HTML content from another file via jQuery ".load()" method.

First, in the HEAD section of your main html file, you need to include this line to access the jQuery libraries' functions:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Second, add this code inside that HEAD section to load the contents into the DIV:

<script>
$(document).ready(function() {
    $('#MainBack').load('html-content-file.html');    
});
</script>

Example of the contents of html-content-file.html:

  <a class="brand" href="#">240Dots</a>
  <div class="navbar-content">
    <ul class="nav">
      <li>
        <a href="index.html">Inicio</a> 
      </li>
      <li>
        <a href="quienes-somos.html">Quienes Somos</a> 
      </li>
      <li>
        <a href="servicios.html">Servicios</a> 
      </li>
      <li>
        <a href="contactar.html">Contactar</a>
      </li>
    </ul>
  </div>

More info: http://docs.jquery.com/Ajax/load

There's an error in your code: ` – Mavamaarten Aug 31 '13 at 15:32 — Mavamaarten, Aug 31 '13 at 15:32

score 0 · Answer 5 · edited May 11 '16 at 22:52

0

Use document.getElementById('element').innerHTML = 'HTML SOURCE' with a javascript event. This works completely without problems.

edited May 11 '16 at 22:52

DavidTaubmann

3,223
2
34
43

answered Jul 26 '15 at 07:25

Pushpendu Ghosh

1
2

How would one load the "HTML SOURCE"? – Lupus Ossorum Apr 29 '16 at 22:24
@lupus-ossorum Over an AJAX request – DavidTaubmann May 20 '16 at 05:08

score 0 · Answer 6 · answered Feb 13 '11 at 21:27

0

You cannot load a complete html page in to another. By that, I mean that you cant have a markup like this:

<html>
  <head></head>
  <body>
    <div>
      <html>
      ...
      </html>
  </body>
</html>

Maybe thing you are searching for is an iframe? A small "window" in your page to another page?

If iframe doesn't suit you, take a look at this Jquery function which loads a html from other source in your specified selector: http://api.jquery.com/load/

answered Feb 13 '11 at 21:27

Mārtiņš Briedis

17,396
5
54
76

How about if I just wanted to load a part of an HTML page? Something like this:
In computing I learn programming, along with the theory behind computers and logic.

Here is a video about the TCP/IP stack which I made with a friend:
– Mark Brewerton Feb 13 '11 at 21:28

Loading an HTML file into a DIV with a link

6 Answers6

--> Demo <--

Linked