Replace innerhtml with external page

Question

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>

@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. — corsiKa
– corsiKa, Commented Jun 20, 2012 at 5:42

Rab Khan · Accepted Answer · 2012-06-20 05:22:05Z

4

use the following, simple and straight

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

if which is coming as parameter

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

answered Jun 20, 2012 at 5:22

Rab Khan

35.7k4 gold badges52 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

corsiKa Over a year ago

By the syntax I assume this is JQuery?

Alvin Wong Over a year ago

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

Rab Khan Over a year ago

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

corsiKa Over a year ago

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!

Alvin Wong · Accepted Answer · 2012-06-20 05:08:38Z

3

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>

answered Jun 20, 2012 at 5:08

Alvin Wong

12.5k5 gold badges55 silver badges78 bronze badges

Collectives™ on Stack Overflow

Replace innerhtml with external page

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related