Импорт документов html между собой

182

15 августа 2021, 03:40

Как импортировать части верстки в основной html документ?

Вот у меня есть основной файл

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
</body>
</html>

Я знаю как в этот документ импортировать части верстки, например в footer.html есть какая верстка. И чтобы ее импортировать в выше написанный документ нужно в него написать данный код:

link rel="import" href="templates/footer.html">
<script>
        let linkk = document.querySelector('link[rel=import]');
        let footer = linkk.import.querySelector('footer');
        document.body.appendChild(footer.cloneNode(true));
</script>

Но я хочу таким же способом импортировать другие элементы сначала в footer.html а потом сам footer.html импортировать в основной документ

Answer 1

Как вариант просто измени этот код для вставки в основной файл, только уже для вставки верстки в его footer. Будет примерно так:

<link rel="import2" href="templates/AnotherFile.html">
<script>
    let linkk2 = document.querySelector('link[rel=import2]');
    let AnotherTag = linkk.import.querySelector('AnotherTag');
    document.getElementsByTagName("footer")[0].appendChild(AnotherTag.cloneNode(true));
</script>

Вставь этот код в основной файл, можно даже скрипты совместить. Вместо AnotherFile.html вставь файл с версткой из которого будешь копировать в footer. Вместо AnotherTag вставь тег "контейнера", из которого будешь брать элементы для footer.

Если тебе нужны будут изменение и в footer.html, что продублируй код, потому как он исполнится только при рендеринге. Вообще похоже на извращение, в том же ASP.NET для всего этого есть Partial View, _Layout, RenderSection() и RenderBody()...