Я працюю в C # / Razor, і оскільки у мене не встановлено IIS на своєму домашньому ноутбуці, я шукав рішення Javascript для завантаження поглядів, створюючи статичну розмітку для нашого проекту.
Я натрапив на веб-сайт, що пояснює методи "виривання jquery", він демонструє метод на сайті робить саме те, що ви шукаєте в простому Джейн-JavaScript ( посилання на посилання внизу повідомлення ). Не забудьте вивчити будь-які вразливості безпеки та проблеми сумісності, якщо ви плануєте використовувати це у виробництві. Я ні, тому я ніколи сам не заглядав у це.
Функція 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();
};
Отримайте вміст
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>
Джерело не є моїм власним, я просто посилаюсь на це, оскільки це хороше рішення для ванільного javascript для ОП. Оригінальний код живе тут: http://gomakethings.com/ditching-jquery#get-html-from-another-page