Откройте html-файл внутри другого html (например, шаблон)

У меня есть html-баннер с пучком кнопок (например, home, about, ... и т. Д.), Которые я хотел бы установить в качестве шаблона. На моих уникальных страницах (например, на домашней странице) я хотел бы «импортировать» этот шаблонный html-файл. Как это сделать?Откройте html-файл внутри другого html (например, шаблон)

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

Спасибо,

источник

2016-10-06 DIZAD

Существует несколько способов сделать это. от переднего конца или от сервера. на сервере мы можем манипулировать шаблоном с использованием некоторых движков шаблонов, таких как ejs, jade и т. д. на лицевой стороне мы можем добавить шаблон в DOM с помощью JS. – raj

Вы можете выполнить ajax файл, а затем выгрузить html в целевой контейнер, ответить tome, если вы хотите, чтобы я написал демо –

, не могли бы вы написать этот код, чтобы я мог его легко увидеть? если a.html был основным файлом, а b.html был дочерним (скажем, шаблоном баннера), как бы оба они были написаны сценарием? – DIZAD

Вы можете использовать HTML Imports импортировать внешний 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>

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

источник

2016-10-08 18:53:36 Supersharp

hmmm, так что если бы я хотел импортировать текст «hello world» из файла template.html. Где именно будет «мир привет»? Я попытался поместить его в элемент , но все же ничего не появилось – DIZAD

Откройте html-файл внутри другого html (например, шаблон)

ответ

Смежные вопросы