JS

2013-09-21 22 views
8

ile başka bir html dosyası nasıl yüklenir Bir web sitesi oluşturmaya çalışıyorum ve bir sayfanın nasıl yükleneceğini anlamaya çalışıyorum. ÖrneğinJS

:

Sen navigator "Ev" üzerine tıklayın sonra bu örneğin söyleyerek bir sayfa cadı metni yükler ekranın alt "Merhaba Word'de!".

Kimse ne yapacağını biliyor mu? Eminim Javascript içerir.

+0

http://www.w3.org/wiki/HTML_links_-_lets_build_a_web#What_are_links.3F – Quentin

+0

benim anlayış çok yararlı değil, üzgünüm. – Shaun

+0

Tek sayfa uygulamaları hakkında mı konuşuyorsunuz? Her zaman aynı sayfada kalırsınız, ancak içerik yeniden yüklenir. –

cevap

15

İçeriği dinamik olarak yüklemek için XMLHttpRequest()'u kullanarak AJAX çağrısı yapabilirsiniz.

Bu örnekte, yüklenen içeriğin döndürüleceği loadPage() işlevine bir URL iletilir. "Ev" metnini içeren div elemanı tıklandığında

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <script type="text/javascript"> 
      function loadPage(href) 
      { 
       var xmlhttp = new XMLHttpRequest(); 
       xmlhttp.open("GET", href, false); 
       xmlhttp.send(); 
       return xmlhttp.responseText; 
      } 
     </script> 
    </head> 

    <body> 
     <div onClick="document.getElementById('bottom').innerHTML = 
         loadPage('hello-world.html');">Home</div> 

     <div id="bottom"></div> 
    </body> 

</html> 

, aynı göreceli olarak "Merhaba-world.html" belgesinde bulunan içerikle "alt" nin kimlikli div öğesinin html setleri yer.

<p>hello, world</p> 
+0

Teşekkürler, ama akılda bir soru. Daha sonra 1 sayfadan bahsedelim. Ne olurdu? – Shaun

+0

Bu uygulamayı tekrar tekrar arayarak çok sayıda belge yüklenebilir, içerik değiştirebilir veya eklenebilir. –

+0

Teşekkürler, ahbap! Harikasın. Yardımın için çok teşekkürler. – Shaun

0

Tamam merhaba-world.html ne arıyorsun tek bir sayfa uygulamasıdır.

Bunu uygulayan birçok teknoloji var, ancak bu kadar kolay değil. Eğer İdarelerinin ile daha ileri gitmek istiyorsanız açısal şablonlar kesinlikle gerekir, http://andru.co/building-a-simple-single-page-application-using-angularjs

: Burada

bunu yapmak için izlenen bir öğretici olduğunu.