CODEWITHSUNDEEP
javascripthtml
Mark Brewerton
Mark Brewerton

Reputation: 101

Loading an HTML file into a DIV with a link

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!

Upvotes: 10

Views: 77368

Answers (6)

Tony S.
Tony S.

Reputation: 79

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

Upvotes: 0

Pushpendu Ghosh
Pushpendu Ghosh

Reputation: 1

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

Upvotes: 0

Paulo Scardine
Paulo Scardine

Reputation: 77251

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:

  1. #MainBack is the ID of the placeholder tag in your parent document
  2. /path/file.html id the URL for the document you want to load data from
  3. 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.

Upvotes: 7

mylesagray
mylesagray

Reputation: 8869

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.

Upvotes: 10

Shaz
Shaz

Reputation: 15867

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

--> Demo <--

Upvotes: 1

Mārtiņš Briedis
Mārtiņš Briedis

Reputation: 17752

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/

Upvotes: 0

Related Questions