如何讓瀏覽器在刷新URL時不刷新整頁？

我試圖理解 - 是否有任何方法讓瀏覽器在用戶點擊時不刷新整個頁面。看到哈希添加方法 - 我需要另一種方法，使用沒有哈希的鏈接。可能是任何頭文件應該發送？或者別的什麼？如何讓瀏覽器在刷新URL時不刷新整頁？

我想處理GET查詢只返回HTML（或特殊js命令）的一部分，而不是所有的頁面，並以AJAX風格處理它。

2011-09-28 Epsiloncool

您對Javascript或AJAX有任何經驗嗎？你的問題不是很清楚，但試着學習AJAX，然後嘗試自己寫一些東西。如果您的代碼存在特定問題，請發佈有關此問題的新問題，我們可以幫助您更好地完成此任務。 –

你可以通過jquery ajaxify你的鏈接。事情是這樣的：

$('a.ajax').click(function(ev){ 
    ev.preventDefault(); 
    var target=$(this).attr('data-target'); 
    var url=$(this).attr('href'); 
    $(target).load(url+' '+target); 
}

這可以在傳導被用來與下面的HTML：

<div id="output"> 
Hello <a href="world.html" class="ajax" data-target="#output">World</a> 
<div>

和內部world.html你需要有：

<div id="output"> 
    Foo bar baz boo 
</div>

理論上，這應該從第一個文件中將「world」文件的內容加載到div中，但我沒有嘗試過。我認爲這是你需要的，因爲正常的鏈接仍然存在，谷歌會正確地索引這個旁路的Ajax，你的用戶會很高興看到頁面部分改變。

來源

2011-09-28 22:48:17 romaninsh

你可以把「假」鏈接做這樣的事情：

<span style="cursor:pointer;" onclick="loadPage('mypagename');">My Link</span>

功能則是：

function loadPage(pageName){ 
    // do ajax call here using pageName var 
}

來源

2011-09-28 21:36:42

不使用哈希更改URL可以與HTML5的歷史記錄來實現API：http://html5demos.com/history

雖然舊版瀏覽器不支持，所以您必須始終有一個回退。

來源

2011-09-28 21:39:09 dirkbonhomme

當用戶使用URL單擊超鏈接時，無法禁止導航。使用散列值導航或讓超鏈接調用JavaScript通常是在單個頁面內添加導航的方式。

但是，如果您嘗試將轉換爲現有的頁面不是以此方式設計的，則必須使用JavaScript來修改超鏈接，以便它們調用Ajax。例如：

var links = document.getElementsByTagName('a'); 
for (var i = 0; i < links.length; i++) { 

    var oldUrl = links[i].getAttribute('href'); 
    links[i].setAttribute('href', 'javascript:void(0)'); 

    links[i].onclick = (function(url) { 
     return function() { 
      // Then you can do your AJAX code here 
     } 
    })(oldUrl); 
}

我建議你不要做這樣的事情，雖然，相當與一個AJAX的設計考慮創建自己的網頁。

來源

2011-09-28 21:40:14 Jacob

你的答案有點混亂。你說，「當用戶用URL單擊一個超鏈接時，你無法阻止導航」，然後繼續描述如何這樣做。我也不同意使用AJAX來創建頁面。這就是所謂的漸進式增強。設計最低公分母的頁面，然後在其上應用AJAX行爲......除非我誤解了你。 – Herbert

我的答案顯示如何製作超鏈接，使其不再包含URL，因此「您無法阻止導航」語句是正確的。我之所以設計AJAX，是因爲儘管你可以通過AJAX檢索頁面並做選擇性替換，但你請求的URL仍然會返回整個HTML文檔，所以你不會讓你的網站執行任何不同或更好的。 – Jacob

您可以通過將單擊事件綁定到鏈接並從事件處理程序**返回'false'，而不刪除url來覆蓋瀏覽器行爲。 – Herbert

如何讓瀏覽器在刷新URL時不刷新整頁？

回答

相關問題