Откройте файл HTML внутри другого HTML (то есть шаблон)

У меня есть баннер HTML с кучей кнопок (то есть дома, о,... и т. Д.), Которые я хотел бы установить в качестве шаблона. На моих уникальных страницах (скажем, на домашней странице) я хотел бы "импортировать" этот шаблон HTML-файл. Как мне это написать?

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

Спасибо,

Источник

1 ответ

Решение

Вы можете использовать импорт HTML для импорта внешнего файла HTML с <template>элемент, в который вы добавляете элементы, которые хотите импортировать.

В основном файле:

<head>
   <link rel="import" href="template.html" id="myTemplate">
</head>
<body>  
   <div id="container"></div>
</body>

вtemplate.htmlфайл:

<template>
    <span>Hello World!</span>
</template>

<script>
    //get the imported HTML document
    var importedDoc = document.querySelector( '#myTemplate' ).import
    //get the content of the template element
    var content = importedDoc.querySelector( 'template' ).content
    //add a compy to the main page
    document.querySelector( '#container' ).appendChild( content.cloneNode( true ) ) 
</script>

В приведенном выше примере, содержание <template> элемент (<span> текст "Hello World!") будет помещен в <div id=container> элемент на главной странице.

Источник
Другие вопросы по тегам