靜態網站的漂亮網址
[英]Pretty URL for static website
問題描述
我正在創建一個“靜態”網站，我希望擁有這樣的網址： http://www.my-website/my-page-1或http://www.my-website/my-page-2
我使用jQuery方法load（）加載網頁內容。 這是我的index.html：
<body>
<nav>
<ul >
<li id="my-page-1-menu-item" class="menu-item" onclick="changeState('my-page-1')">
<span><a>Link 1</a></span>
</li>
<li id="my-page-2-menu-item" class="menu-item" onclick="changeState('my-page-2')">
<span><a>Link 2</a></span>
</li>
</ul>
</nav>
<!-- Content, loaded with $.load() -->
<div id="content"></div>
</body>
我知道如何使用歷史記錄API更改我的網址而無需重新加載頁面
這是我的javascript：
function changeState(url) {
window.history.pushState(url, 'Title', url);
loadStateData(url);
}
function loadStateData(state) {
var content = '#content';
$(content).load( 'views/' + state + '.html');
// Manage menu style
$('.menu-item').removeClass('active');
$('#' + state + '-menu-item').addClass('active');
}
使用此代碼，我可以通過單擊Link 2來訪問http://www.my-website/my-page-2 ，但是如果刷新網頁或鍵入http://www.my-website/my-page-2直接在瀏覽器地址欄中，我收到404錯誤。
我對.htaccess URL重新寫入不太滿意，但我認為它應該可以解決我的問題。
而且我不想使用AngularJS或類似的其他框架（除非它是真正的輕量級框架）
2 個解決方案
解決方案1
2 2016-07-05 14:10:11
您需要確保在使用JavaScript時：
- 修改當前頁面的DOM，以使其實際上是另一個頁面
- 更改URL以標識其他頁面
…還要確保服務器也可以自己生成該頁面 。
這樣，如果JavaScript 由於任何原因而失敗，那么一切仍將正常進行。 這是遵循最佳實踐的基本原則 。
這可能涉及復制邏輯服務器端，這可能需要大量工作。 健壯性+客戶端性能黑客無法廉價地協同工作。 考慮使用同構JS，並使用無頭瀏覽器拍攝頁面快照來加快此過程。
我對.htaccess URL重新寫入不太滿意，但我認為它應該可以解決我的問題。
當然不能很好地解決它。 您可以使用它將每個請求轉移回首頁（因此，每個URL上都有重復的內容），然后使用客戶端JS讀取location並確定要加載的內容，但是您最好使用hashbang，因為擁有使用pushState所有優勢，但向您的網站添加了重復的內容URL（並投入了大量工作來創建這些重復的內容URL）。
解決方案2
0 2016-07-05 14:09:58
在沒有任何服務器端重寫的情況下做到這一點聽起來是不可能的。 刷新頁面時，HTTP服務器需要根據URL為您提供適當文件的內容。
但是..如果您真的想讓URL重寫客戶端，則可以進行一次通用重寫，因為在基於PHP的網站內部進行重寫的情況下，通常會進行通用重寫（不是通過.htaccess或nginx規則，而是使用PHP腳本） 。 如果網絡服務器上沒有類似“ / my-page-2”的文件，只需將客戶端重定向到/index.html?url=/my-page-2並使用JavaScript分配到正確的子頁面。
提取漂亮網址的一部分
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.