模擬PHP包括沒有PHP

我想要在多個頁面上包含相同的導航菜單，但我沒有PHP的支持，也不能以任何其他方式影響我的服務器。模擬PHP包括沒有PHP

我想避免簡單地將html複製並粘貼到所有頁面上，因爲這會使菜單更新變得很痛苦。是

我能想到的兩個選項如下：

1）擁有所有的內容存在一個頁面上，然後確定要顯示基於附加到網址的關鍵字，其內容：

example.com/index?home 
example.com/index?news

2）包括有寫出來的菜單，並調用函數中的每個頁面

function setupMenu() { 
    $("#nav").html("<ul class='nav'><li>home</li><li>news</li></ul>"); 
}

與選項1功能的JavaScript文件，更新過程將包括Ø F中的一個頁面

有了第2個選項編輯一個導航菜單，更新就意味着在JavaScript文件改變功能

我與選項1關注的是，該網頁將要加載的內容很多，它不需要顯示。我對選項2的擔憂可能看起來微不足道，但這是代碼可能會變得混亂。

有沒有任何理由這樣做會比其他方式更好？還是有第三個優越的選擇，我錯過了？

來源

2012-08-16 dougmacklin

您可能沒有在服務器上支持PHP。但是，您可以在本地計算機上創建自己的網站，然後根據需要生成完整頁面（構建系統）。有時候這是一個可行的選擇。 – hakre 2012-08-16 18:59:04

+1 @hakra，這是一個非常聰明的工作。 – 2012-08-16 20:46:23

您有幾種選擇，每個都有自己的優點和缺點：

服務器端包含或SSI。如果你沒有PHP，那麼你很有可能沒有SSI，而這個選項需要對你的.htaccess文件進行一些令人討厭的分析。檢查Dominic P.對SSI寫作的回答。 SSI優於JavaScript或Frames的好處是它不需要用戶啓用JS（很多用戶不需要），也不會出現任何導航困難。
框架。您可以使用standard frames將導航置於其自己的單獨文件中，並且使用正確的樣式可以實現無縫。您也可以使用iframe將您的導航放置在網站的任意部分，例如邊欄或其他內容。幀，特別是標準幀的缺點是它們傾向於製作書籤，鏈接和前進/後退按鈕的行爲奇怪。好處是，框架不需要瀏覽器合規性或服務器支持。
JavaScript。您可以參考任何其他解答，以獲得JS解決方案的出色解釋，特別是在您使用jQuery時。但是，如果您的網站沒有足夠的動態性，以至於您的用戶希望啓用JavaScript，則這意味着大量的觀看者根本看不到菜單 - 確實很糟糕。

來源

2012-08-16 19:10:02

結束了與框架一起SSI不是一個選項。 JavaScript的load（）方法的工作，但需要很長的時間才能完成 – dougmacklin 2012-08-20 18:10:27

我建議堅持與框架，因爲你已經做了，但如果JS負載（）需要那麼久有可能是其他事情正在進行。 FWIW，iFrame可能會比導航的標準框架更好。對不起，您的託管是如此限制！ – 2012-08-20 22:48:10

服務器端包括：http://www.freewebmasterhelp.com/tutorials/ssi/

來源

2012-08-16 18:56:53 ChrisW

感謝這個教程，我會研究我的服務器是否支持這些 – dougmacklin 2012-08-16 19:10:39

是使用.load jQuery的AJAX功能

$('#result').load('ajax/menu.html');

這樣，你的代碼保持乾淨，你可以編輯包括單獨的HTML文件只是像PHP一樣。

來源

2012-08-16 18:57:02

謝謝你的回答，標記爲@ user190284's，因爲我認爲這對於那些不熟悉jQuery – dougmacklin 2012-08-16 19:12:29

結賬Server Side Includes。我對他們沒有太多的經驗，但從我記得的角度來看，他們的設計是解決您的問題。

來源

2012-08-16 18:57:12

你應該考慮AJAX來完成這項任務。包含像jQuery這樣的第三方庫，並在佔位符內加載單獨的HTML文件，並通過ID將它們作爲目標。

例如，在主HTML頁面：

<div id="mymenu"></div>

此外，在主HTML，但在頭部分：

$('#mymenu').load('navigation.html');

但你最好的選擇將切換到主機支持PHP或任何其他服務器端包含。這會讓你的生活變得更輕鬆。

來源

2012-08-16 19:00:06

的人來說更有幫助測試，這種方法的工作原理，但需要很長時間，平均速度超過兩秒，直到導航出現。我的服務器似乎一般處理速度都很慢，所以我建議未來的用戶自己試一試 – dougmacklin 2012-08-20 18:12:29

加載時間完全取決於您的服務器和客戶端的連接速度。使用JavaScript引擎（在這種情況下，它的jQuery擴展）在幾毫秒內解析接收到的數據本身。 – 2012-09-11 14:45:08

您可以使用HTML進口http://w3c.github.io/webcomponents/spec/imports/

這裏是http://www.html5rocks.com/en/tutorials/webcomponents/imports/

warnings.html一個例子包含

<div class="warning"> 
    <style scoped> 
     h3 { 
     color: red; 
     } 
    </style> 
    <h3>Warning!</h3> 
    <p>This page is under construction</p> 
    </div> 

    <div class="outdated"> 
    <h3>Heads up!</h3> 
    <p>This content may be out of date</p> 
    </div>

然後index.html可能包含

<head> 
    <link rel="import" href="warnings.html"> 
</head> 
<body> 
    ... 
    <script> 
    var link = document.querySelector('link[rel="import"]'); 
    var content = link.import; 

    // Grab DOM from warning.html's document. 
    var el = content.querySelector('.warning'); 

    document.body.appendChild(el.cloneNode(true)); 
    </script> 
</body>

來源

2015-11-13 17:12:37

模擬PHP包括沒有PHP

回答

相關問題