Импортировать HTML из одного файла в другой, используя HTML и JS?

Question

Я пробовал несколько разных решений как здесь, так и из разных источников в Интернете, но, похоже, ничего не работает. Кажется, что iframes извлекают тестовый файл pdf, который у меня есть, и используют его вместо html (я планирую использовать средство просмотра PDF iframe)

jQuery и js теги сценария, похоже, не действуют

Я использую только что установленную Firefox, поэтому js включен.

Я провожу тестирование, открывая файл html, поэтому мне нужно открыть какую-то другую веб-страницу Кстати?

Я просто хочу, чтобы мой заголовок и панель навигации были на всех моих страницах, при этом мне нужно было обновить только один файл. если у кого-то есть какие-либо другие решения, я хотел бы попробовать их.

Заранее спасибо.

Answer 1

Мое решение до сих пор таково:

function renderImportContent() {
    //get template element and clone to clon
    var templateList = document.body.querySelectorAll("div[import]");
    //run throught the list and replace elements with templates
    for (var i = 0; i < templateList.length; i++) {
        //console.log(templateList[i].innerHTML);
        templateList[i].outerHTML = fetchTemplate(templateList[i].getAttribute("import"))
    }
}

function fetchTemplate(path) {
    console.log('/html/template/'.concat(path));
    fetch('/html/template/'.concat(path)).then((response) =>{ return response.text();}).then((html) => { document.body.innerHTML = html}).catch((error) => {console.log("fetch error:", err)});
}

Единственная проблема, по-видимому, заключается в том, что он удаляет больше, чем должен. Вместо замены внутренней части тега div он заменяет все тело.

Я также пытался использовать textContent, но это также не сработало.

Answer 2

Попробуйте решение, которое я нашел: https://github.com/louisho5/jQuery-Include-HTML-File-Plugin Это позволит вам включить еще одну html страницу в вашу текущую html страницу, используя jquery.

. Вы также можете выполнить sh то, что вы пытаетесь достичь с помощью php, включает, но требует, чтобы ваше приложение работало на веб-сервере:

Добавьте этот тег внутри тела вашей страницы <?php include 'navigation.php';?>

См .: https://www.w3schools.com/php/php_includes.asp