Replace innerhtml with external page

javascript innerhtml

25,513

Solution 1

use the following, simple and straight

$('#which').load('test.html');

if which is coming as parameter

$('#'+which).load('test.html');

Solution 2

If you want to embed another webpage in one, you should think of using <iframe>. Something like:

<script type="text/javascript">
function show(which) {
    document.getElementById(which).src=which+".html";
    return false;
}       
function showHome() { show('home'); return false;} // for onload

</script>
<iframe id="home"></iframe>

25,513

Author by

corsiKa

I'm here to find out about the mysteries of air.

Updated on July 16, 2022

Comments

corsiKa almost 2 years
I have a page that consists of a header div for navigation, a content div for content, and a footer div that just has some static information.

The idea is that when you click on something in the header bar, the content div changes its content accordingly. I'd like to store each content element in its own file, for ease of development. How can I go about filling in this magicLoad function I've written below?

I'm currently not using any framework (jquery comes to mind) but I'm certain not opposed to using one. If there's other best practices I'm violating here, I'm keen to know as well, but my primary goal is to load from an external page. How can I do this?

Here's a basic skeleton mockup of my setup right now. (There's more than just those 3 of course, but those are enough to get the point across.)
```
<html>
    <script type="text/javascript">
    function show(which) {
        document.getElementById(which).innerHtml = magicLoad(which + ".html");
        return false;
    }       
    function showHome() { show('home'); return false;} // for onload

    </script>
    <body>
    <div id="header">
        <a href="javascript:void(0)" onclick="show('home')">HOME</a> |
        <a href="javascript:void(0)" onclick="show('training')">TRAINING</a> |
        <a href="javascript:void(0)" onclick="show('audits')">AUDITS</a>
    </div>
    <div id="content">

    </div>
    <div id="footer">

    </div>
    </body>
    <script> window.onload=showHome; </script>
</html>
```
- Madara's Ghost almost 12 years
  
  You're looking for Ajax.
- corsiKa almost 12 years
  
  @Truth no, ajax would be asynchronous. This is entirely synchronous. If I wanted someone else to control the content, then Ajax would be a great solution.
- Madara's Ghost almost 12 years
  
  Ajax can very much be synchronous.
corsiKa almost 12 years

By the syntax I assume this is JQuery?
Alvin Wong almost 12 years

What if that HTML contains a full <head> to <body> tags? It doesn't make sense inside a div
Raab almost 12 years

you have to be careful with that, that's your responsibility with current specifications. it has to be partial page
corsiKa almost 12 years

So this was indeed very close to what I was looking for. Basically, which determined the html to load. So what I did was $('#content_div').load(which + '.html'); but this guided me there. Thanks!