Я работал в C # / Razor, и так как у меня на домашнем ноутбуке нет настроек IIS, я искал решение javascript для загрузки представлений при создании статической разметки для нашего проекта.
Я наткнулся на веб-сайт, объясняющий методы «отказа от jquery», он демонстрирует, что метод на сайте делает именно то, что вам нужно, в простом Jane 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>
просмотров / header.html
<!-- This element will replace #header -->
<header id="new-header"></header>
Источник не мой, я просто ссылаюсь на него, так как это хорошее ванильное решение JavaScript для OP. Оригинальный код живет здесь: http://gomakethings.com/ditching-jquery#get-html-from-another-page