2015-11-02 206 views
2

它涉及我在網站開發方面的最後一年項目。我想改變我的網頁的內容,而不重新加載頁面 - 我知道這可以實現使用css/ajax或jQuery,但這隻會通過隱藏和顯示或replaceWith()在jQuery中。 我希望網址也可以改變。我想實現類似這樣的頁面https://www.khanacademy.org/computing/computer-programming - 當用戶單擊INTRO TO JS:繪圖和動畫時,您將看到頁面更改的URL和內容,但頁面不會重新加載。更改網址並更新頁面內容,無需重新加載

指南將不勝感激。謝謝

小草案:

**MY header.php** 

<script language="javascript" src="jquery-1.4.4.min.js"></script> 
 
<script> 
 
$(function(){ 
 
\t $("a[rel='tab']").click(function(e){ 
 
\t \t //e.preventDefault(); 
 
\t \t /* \t 
 
\t \t if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content; 
 
\t \t if commented, html5 nonsupported browers will reload the page to the specified link. 
 
\t \t */ 
 
\t \t 
 
\t \t //get the link location that was clicked 
 
\t \t pageurl = $(this).attr('href'); 
 
\t \t 
 
\t \t //to get the ajax content and display in div with id 'content' 
 
\t \t $.ajax({url:pageurl+'?rel=tab',success: function(data){ 
 
\t \t \t $('#content').html(data); 
 
\t \t }}); 
 
\t \t 
 
\t \t //to change the browser URL to 'pageurl' 
 
\t \t if(pageurl!=window.location){ 
 
\t \t \t window.history.pushState({path:pageurl},'',pageurl); \t 
 
\t \t } 
 
\t \t return false; 
 
\t }); 
 
}); 
 
/* the below code is to override back button to get the ajax content without reload*/ 
 
$(window).bind('popstate', function() { 
 
\t $.ajax({url:location.pathname+'?rel=tab',success: function(data){ 
 
\t \t $('#content').html(data); 
 
\t }}); 
 
}); 
 
</script> 
 
<div id='menu'> 
 
\t <a rel='tab' href='http://localhost/html5-history-api/menu1.php'>menu1</a> | 
 
\t <a rel='tab' href='http://localhost/html5-history-api/menu2.php'>menu2</a> | 
 
\t <a rel='tab' href='http://localhost/html5-history-api/menu3.php'>menu3</a></div>

我menu1.php(MENU2和3的相同代碼)

<?php 
 
if($_GET['rel']!='tab'){ 
 
\t include 'header.php'; 
 
\t echo "<div id='content'>"; 
 
} 
 
?> 
 
menu1 content in menu1.php 
 
<?php 
 
if($_GET['rel']!='tab'){ 
 
\t echo "</div>"; 
 
\t include 'footer.php'; 
 
}?>

我想,當我點擊鏈接 - 鏈接消失,它如果您使用的是Chrome瀏覽器顯示只有像只「在menu1.php MENU1內容」,並沒有其他的頁面

+0

? –

+1

檢查這個http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page –

+0

看看Angular JS,更具體地說,這個概念叫做「單頁應用程序(SPA)」。 Gmail,臉譜等等現在都在使用相同的體系結構 – AdityaParab

回答

0

上TEH內容,在該div上右鍵點擊並使用選項「檢查元素」。這些是Web開發人員的便利工具。你提到的鏈接只是一個超鏈接,因爲它是同一個域下的非常簡單的靜態頁面,使用相同的資源(css,js),它的加載速度非常快,你會得到一個沒有頁面加載的印象。 enter image description here

+0

是的,這是讓我困惑的東西 - 我沒有嘗試檢查元素,我沒有看到任何ajax或jquery他們只是簡單的div – Neha

0

我相信我從複製鏈接粘貼的腳本解釋了他們如何替換網址。跟蹤使用localStorage來跟蹤頁面位置和其他內容的位置。轉到該頁面並導航到您參考的鏈接。然後打開控制檯並鍵入localStorage。當你按下香蕉時,你會看到我在說什麼。

您可以通過

localStorage.setItem("itemName", item) 
localStorage.getItem("itemName") 

下面這樣做是源代碼

<script type="text/javascript"> 
(function() { 
     // If we arrived via a Facebook callback, it might have appended #_=_ 
     // to our URL. This can confuse our Backbone routers, so get rid of it. 
     // http://stackoverflow.com/questions/7131909/facebook-callback-appends-to-return-url 
     if (window.location.hash === "#_=_"){ 
      if (history.replaceState) { 
       history.replaceState(null, null, 
         window.location.href.split("#")[0]); 
      } else { 
       window.location.hash = ""; 
      } 
     } 
    })(); 
</script> 
要更改URL,它不會重新加載整個頁面
+0

是的,但這只是一個facebook回調 – Neha

+0

真的,這只是他們的頁面的一個例子。重要的信息是他們所做的這個版本是如何完成的。這些方法允許存儲信息並從用戶計算機的localStorage中調用信息。然後你使用這些信息來記住東西。使用ajax調用將page.html注入到視圖中並編輯該窗口。與FB代碼的位置。也動態注入DOC。它的一組函數不是1.我打算髮佈一個js/jquery方法來完成這個任務的github回購,但是我很忙。會在您啓動時向您發送消息。點是您需要的 – ALFmachine

相關問題