實現Web 2.0導航系統的最佳方式

現在就是我的情況：我正在製作CMS。點擊鏈接時，我希望頁面使用Ajax動態加載。鏈接中的問題！實現Web 2.0導航系統的最佳方式

實時更改地址欄中地址的唯一方法是使用錨標籤。但PHP沒有獲得錨定標記，因此我無法使用PHP加載網站加載頁面內容。如果我要使用查詢字符串加載頁面，查詢字符串無法在地址欄中單擊鏈接進行更新，因爲這會重新加載頁面。

我想Javascript可以檢查地址，將錨標記保存在cookie中並重新加載頁面，但我寧願不必去這樣的長度。

有沒有人知道這個問題的解決方案？

來源

2010-07-14 Hubro

不久前還有類似的問題，我想出了以下解決方案。

您的網址應該指向真實網頁，以便爲js殘疾用戶提供幫助。點擊處理程序應該處理Ajax請求。哈希應該包含url，並且像&ajax這樣的部分表示請求的類型。

如果請求來自ajax，只需發送內容。如果不是，則將內容封裝到頁眉和頁腳中以使用完整站點進行響應。

網址應該與鏈接到ajax生成的散列並使用它們作爲鏈接。整個想法基本上模仿了你可以在臉書上看到的那種行爲。

的Javascript

// click handler for ajax links 
function goToWithAjax(hash) { 
    hash = hash.href ? hash.getAttribute("href", 2) : hash; 
    ajax(hash, function(response) { 
    document.getElementById("content").innerHTML = response; 
    }); 
    hash = ("#!/" + hash).replace("//","/"); 
    window.location.hash = hash; 
    return false; 
}

的.htaccess

auto_prepend_file = "prepend.php" 
auto_append_file = "append.php"

前插

$url = $_SERVER['REQUEST_URI']; 
$parts = explode('#!', $url); 
$hash = isset($parts[1]) ? $parts[1] : false; 

// redirect if there is a hash part 
if ($hash) { 
    header("Location: $hash"); 
} 

// find out if it's an ajax request 
$ajax = strstr($url, "&ajax"); 

// we need header if it's not ajax 
if (!$ajax) { 
    get_header(); 
}

追加

// we need footer if it's not ajax 
if (!$ajax) { 
    get_footer(); 
}

get_header（）

function get_header() { 

echo <<< END 
<html> 
<head></head> 
<body> 
<div id="page"> 
    <div id="header"> 
    <div id="logo"></div> 
    <ul id="nav">menu...</ul> 
    </div> 
    <div id="content"> 
END; 

}

get_footer（）

function get_footer() { 

echo <<< END 
    </div> <!-- end of #content ---> 
    <div id="footer">(c) me</footer> 
</div> <!-- end of #page ---> 
</body> 
</html> 
END; 

}

來源

2010-07-14 23:25:24 galambalazs

我第二個這個解決方案，這是你在Facebook看到的一個非常常見的實現，等等。請注意 - 如果您想將內容公開給蜘蛛，請確保您的站點地圖可用。 – funwhilelost 2010-07-15 00:40:50

鏈接是指向完整頁面的所有鏈接。蜘蛛獲得的內容就像在WEB 1.0頁面中一樣。但是，無論如何，站點地圖都是需要的。 :) – galambalazs 2010-07-15 10:48:44

prepend/append方法不是很強大。用這種方式構建複雜的網站將很困難。通過使用MVC方法，最好擁有該頁面的完整版本和其不同部分的多個可調用部分。 – 2010-07-24 03:22:26

我能看到爲什麼你可能要加載部分頁面與阿賈克斯。但整個頁面卻毫無意義。

一個jQuery的解決方案可能是這樣的：

$(a.ajax_link).click(function(){ 
    var url = $(this).attr('href'); 
    $.ajax({ 
    url:url, 
    success:function(data) { 
     $('body').html(data); 
     return false; 
    } 
    }); 
});

我已經沒有辦法測試了，但它仍然應該在未啓用JavaScript工作。

來源

2010-07-15 01:53:51 Keyo

這與我的問題絕對沒有關係，因此一直如此。抱歉 – Hubro 2010-07-15 05:36:42

實現Web 2.0導航系統的最佳方式

回答

相關問題