Substitua innerhtml por página externa

Question

Jun 20, 2012, 07:06 AM

Substitua innerhtml por página externa

Eu tenho uma página que consiste em um cabeçalho div para navegação, um conteúdo div para conteúdo e um rodapé div que apenas tem algumas informações estáticas.

A ideia é que quando você clica em algo na barra de cabeçalho, o conteúdo div altera seu conteúdo de acordo. Gostaria de armazenar cada elemento de conteúdo em seu próprio arquivo, para facilitar o desenvolvimento. Como posso proceder para preencher estemagicLoad função que eu escrevi abaixo?

Atualmente não estou usando nenhuma estrutura (jquery vem à mente), mas tenho certeza que não se opõe a usar um. Se houver outras práticas recomendadas que estou violando aqui, quero saber também, mas meu objetivo principal é carregar de uma página externa. Como posso fazer isso?

Aqui está uma maquete básica da minha configuração agora. (Há mais do que apenas aqueles 3, é claro, mas esses são o suficiente para mostrar o ponto.)

<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>