2012-06-20 4 views
3

У меня есть страница, которая состоит из заголовка div для навигации, контента div для контента и нижнего колонтитула, который имеет только статическую информацию.Заменить innerhtml на внешнюю страницу

Идея состоит в том, что когда вы нажимаете на что-либо в панели заголовка, содержимое div соответствующим образом меняет свой контент. Я хотел бы сохранить каждый элемент контента в своем собственном файле для удобства разработки. Как я могу заняться этой функцией magicLoad, которую я написал ниже?

В настоящее время я не использую фреймворк (jquery приходит на ум), но я уверен, что не против его использования. Если есть другие лучшие практики, которые я нарушаю здесь, я тоже очень хочу знать, но моя основная цель - загрузить с внешней страницы. Как я могу это сделать?

Вот базовый макет скелета моей установки прямо сейчас. (Там больше, чем просто те 3, конечно, но это достаточно, чтобы получить точку в поперечнике.)

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

Вы ищете Ajax. –

+0

@Truth no, ajax будет асинхронным. Это полностью синхронно. Если бы я хотел, чтобы кто-то другой контролировал контент, то Ajax был бы отличным решением. – corsiKa

+0

Ajax может быть очень синхронным. –

ответ

4

использовать следующие, простой и прямой

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

если который подходит в качестве параметра

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

По синтаксису я предполагаю, что это JQuery? – corsiKa

+0

есть. это jquery – Rab

+0

Что делать, если этот HTML-код содержит полные '' to '' теги? Это не имеет смысла внутри div –

3

Если вы хотите вставить другую веб-страницу в одном, вы должны думать об использовании . Что-то вроде:

<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> 
Смежные вопросы