Symulacja PHP Dołącz bez PHP

Question

Chcę włączyć to samo menu nawigacyjne na wielu stronach, jednak nie mam wsparcia PHP, ani nie mogę wpływać na mój serwer w żaden inny sposób.

Chcę uniknąć prostego kopiowania i wklejania html na wszystkie strony, ponieważ mogłoby to spowodować, że aktualizacja menu będzie stanowił problem.

Obie opcje można myślę, są następujące:

1) Posiada wszystkie treści istnieje na jednej stronie, a następnie określić, jakie treści, aby pokazać na podstawie słowa kluczowego przyłączonej do URL:

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

2) dołączyć plik javaScript, który posiada funkcję, która pisze się menu i wywołać funkcję na każdej stronie

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

z opcją 1, proces aktualizacji będzie składać się o f edycji jedno menu nawigacyjnym z jednej strony

z opcją 2, aktualizowanie oznaczałoby zmianę funkcji w pliku javascript

Moja troska o Wariant 1 jest to, że strona będzie musiał załadować dużo treści, które go nie musiałby wyświetlać. Moje obawy dotyczące opcji 2 mogą wydawać się trywialne, ale to, że kod może stać się bałaganiarski.

Czy są jakieś powody, aby to zrobić w jeden sposób byłoby lepsze od drugiego? A może jest trzecia opcja nadrzędna, której mi brakuje?

Answer 1

masz kilka opcji, z których każda ma swoje zalety i wady:

• Server Side Includes lub SSI. Jeśli nie masz PHP, istnieje duża szansa, że ​​nie będziesz miał SSI, a ta opcja wymaga trochę irytującego muckingu z plikiem .htaccess. Sprawdź Dominic P.odpowiedź na zapis SSI. Korzyścią płynącą z SSI w porównaniu z JavaScriptem lub ramkami jest to, że nie wymaga on od użytkownika włączonego JS - czego wielu użytkowników tego nie robi - i nie przedstawia też żadnych trudności nawigacyjnych.

• Ramki. Możesz użyć standard frames, aby umieścić nawigację w oddzielnym pliku, a przy prawidłowej stylizacji będzie ona płynna. Możesz również użyć narzędzia iframe, aby umieścić nawigację w dowolnej części witryny, na przykład na pasku bocznym lub czymkolwiek innym. Wadą ramek, szczególnie standardowych ramek, jest to, że mają tendencję do tworzenia zakładek, łączy i przycisków do przodu/do tyłu zachowują się dziwnie. Z drugiej strony ramki nie wymagają zgodności z przeglądarką ani obsługi serwera.

• JavaScript. Możesz odwołać się do którejkolwiek z pozostałych odpowiedzi, aby uzyskać doskonałe wyjaśnienia dotyczące rozwiązania JS, szczególnie jeśli używasz jQuery. Jeśli jednak Twoja witryna nie jest wystarczająco dynamiczna, aby Twoi użytkownicy chcieli mieć włączoną obsługę JavaScript, oznacza to, że duża liczba Twoich widzów nie będzie w ogóle widziała menu - zdecydowanie źle.

-

Answer 2

po stronie serwera obejmuje: http://www.freewebmasterhelp.com/tutorials/ssi/

Answer 3

Tak Zastosowanie funkcji jQuery .load ajax

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

---

ten sposób kod pozostaje czysty, a może po prostu zmodyfikować zawiera w oddzielnych plikach HTML tylko jak PHP.

Answer 4

Sprawdź Server Side Includes. Nie mam z nimi dużo doświadczenia, ale z tego, co pamiętam, są one zaprojektowane tak, aby stanowić rozwiązanie twojego problemu.

Answer 5

Powinieneś rozważyć AJAX dla tego zadania. Dołącz bibliotekę stron trzecich, takich jak jQuery, i załaduj oddzielne pliki HTML wewnątrz elementów zastępczych, kierując je według identyfikatora.

Np w swojej głównej stronie HTML:

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

Również w głównym HTML, ale w sekcji HEAD:

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

Ale najlepiej byłoby, aby przełączyć się do hostingu który obsługuje PHP lub inne funkcje zawarte po stronie serwera. To znacznie ułatwi Ci życie.

Answer 6

Można użyć Imports HTML http://w3c.github.io/webcomponents/spec/imports/

Oto przykład z http://www.html5rocks.com/en/tutorials/webcomponents/imports/

warnings.html zawiera

<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> 

Następnie index.html może zawierać

<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>