2012-02-11 89 views
0

我正在構建一個簡單的網站,它由一個標題(標題和一個菜單)和一個表格組成,其中放置了內容(因爲這樣我可以使佈局更容易)。問題是,每當我改變類別(點擊菜單中的一個鏈接),整個網站在加載時就變成白色。我喜歡它,所以這不會發生,所以我只需要加載表的內容,而不是整個頁面。我想這可以很容易地使用框架來完成,但我被告知他們很快就會停止支持,並且使用它們是一種不好的做法。有沒有辦法做到這一點?如何使用Javascript將HTML代碼加載到表中?

目前,該網站在這裏,所以你可以看到我在說的效果: http://bljak.org:1235/index.html

另外,它會是最好的,如果網站只是HTML和Javascript,因爲我不太熟悉PHP(我正在編寫一個帶有512Mb RAM的上網本,所以我懷疑我可以啓動服務器那裏)。

+0

不知道人們仍然以這種方式製作網站,除了可能是tor瀏覽器!但你可以做一個jQuery.Ajax({});但這可能有點過頭 – davethecoder 2012-02-11 16:17:29

+0

這樣做網站有什麼不好嗎? – corazza 2012-02-11 16:51:26

回答

1

我會給基於jQuery的方式 - 這是最簡單和短期的方式。

首先,下載最新的jQuery庫 - 可以找到here

假設你命名你的本地文件「jquery.min.js」在你現有的HTML代碼,行「包括」 jQuery庫:

<script type="text/javascript" src="jquery.min.js"></script> 

現在,所有你需要的是這個代碼在您的網頁就大功告成了:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("a").bind("click", function() { 
      var href = $(this).attr("href"); 

      //bust nasty browser AJAX cache: 
      href += "?nnn=" + parseInt(Math.random() * 1000000); 

      $("#Container").load(href); 
      return false; 
     }); 
    }); 
</script> 

更換集裝箱在你的頁面的實際元素應包含「身體」的ID,然後點擊任何鏈接會導致鏈接的頁面被裝入集裝箱沒有完整頁面重新加載。

該代碼非常簡單,可以隨時詢問您是否想了解它的任何部分。

jQuery小於100K,所以對於現代互聯網速度來說,它確實不應該是任何問題 - 純JavaScript當然是可能的,但會導致很多讓它跨瀏覽器的麻煩。

+0

這是我正在尋找的內容。非常感謝你! – corazza 2012-02-12 13:05:51

+1

乾杯@Bane,很高興我能幫上忙。 :) – 2012-02-12 13:06:19

+0

但是,似乎有錯誤:XMLHttpRequest無法加載文件:/// C:/Documents%20and%20Settings/user/Desktop/Latinski/izgovorigs.html。 Access-Control-Allow-Origin不允許Origin null。我該怎麼做,這是什麼意思? – corazza 2012-02-12 13:11:35

1

您可以使用innerHTML改寫標籤和結束標記之間的文本:

<script type="text/javascript"> 
function changeText(){ 
    document.getElementById('tbl').innerHTML = '<table><tr><td>New Text</td></tr></table>'; 
} 
</script> 
<div id="tbl"></div> 
<input type="button" onclick="javascript:changeText()" value="Change Text"/> 
+0

當然可以。但是,這意味着我需要將整個HTML頁面(或者只是一個表格)複製到單個語句中,並且進行更改會有點痛苦......我正在尋找類似的東西,但不直接將代碼此外,當我嘗試將該表複製到引號中時,它有點打破了某個位置(引號)... – corazza 2012-02-12 11:59:37

相關問題