Pracowałem w C # / Razor, a ponieważ nie mam konfiguracji IIS na moim domowym laptopie, szukałem rozwiązania javascript do ładowania widoków podczas tworzenia statycznych znaczników dla naszego projektu.
Natknąłem się na stronę internetową wyjaśniającą metody „porzucania jquery”, która demonstruje metodę w witrynie, która robi dokładnie to, czego szukasz, w prostym javascript Jane ( odsyłacz na dole postu ). Pamiętaj, aby zbadać wszelkie luki w zabezpieczeniach i problemy ze zgodnością, jeśli zamierzasz używać tego w środowisku produkcyjnym. Nie jestem, więc sam nigdy nie zaglądałem do tego.
Funkcja JS
var getURL = function (url, success, error) {
if (!window.XMLHttpRequest) return;
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status !== 200) {
if (error && typeof error === 'function') {
error(request.responseText, request);
}
return;
}
if (success && typeof success === 'function') {
success(request.responseText, request);
}
}
};
request.open('GET', url);
request.send();
};
Pobierz zawartość
getURL(
'/views/header.html',
function (data) {
var el = document.createElement(el);
el.innerHTML = data;
var fetch = el.querySelector('#new-header');
var embed = document.querySelector('#header');
if (!fetch || !embed) return;
embed.innerHTML = fetch.innerHTML;
}
);
index.html
<!-- This element will be replaced with #new-header -->
<div id="header"></div>
views / header.html
<!-- This element will replace #header -->
<header id="new-header"></header>
Źródło nie jest moje własne, tylko się do niego odwołuję, ponieważ jest to dobre, waniliowe rozwiązanie javascript dla OP. Oryginalny kod znajduje się tutaj: http://gomakethings.com/ditching-jquery#get-html-from-another-page