Render html inside html

How to include another HTML file in an HTML file?

In this tutorial, we shall learn to include another HTML file in an HTML file.

Various methods are available to include another HTML file in an HTML file. Let us quickly go through the techniques that have support on the web.

Using JQuery load to include an HTML file

In this section, we shall check how to use JQuery’s load method to include an HTML file.

Users can follow the syntax below to use this method.

Syntax

The wrapper appends the new HTML file that jQuery loads.

Parameters

• wrapper − ID of the DOM element that includes the new HTML content.
• htmlfile − The new HTML file name.

Example

The program requires two HTML files. One is the main HTML file to load the new HTML file. Next is the new HTML file. Place both files in the exact location.

Define a wrapper DOM element in the main HTML file to append the new HTML file. Using the jQuery load technique load the new HTML file and set it inside the wrapper DOM.

Inner HTML file

 
html> body> h3>This is an HTML page from same directoryh3> body> html> 

Main HTML file

html> head> script src="https://code.jquery.com/jquery-1.11.3.min.js">script> script> $(function() < $("#includeHtml").load("result.html"); >); script> head> body> h2>Program to include another HTML file in this HTML using i>JQuery loadi>h2> div id="includeHtml">div> body> html> 

Output

Using w3-include-html attribute to include an HTML file

In this section, let us check how to use the w3-include-html attribute to include an HTML file.

Users can follow the syntax below to use this method.

Syntax

Includes a wrapper DOM with the attribute w3-include-html having the new HTML file name as the value.

//Read the attribute fileName = domEl.getAttribute("w3-include-html"); //Make XMLHttpRequest with the attribute value xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function() < //If the request is successful, load the new HTML. Else throw 404 error and try again if (this.readyState == 4) < if (this.status == 200) if (this.status == 404) /* Remove the attribute and invoke the function again*/ domEl.removeAttribute("w3-include-html"); addHTML(); > xmlHttp.open("GET", fileName, true); xmlHttp.send();
 

The syntax reads the w3-include-html attribute value and loads the new HTML with a XMLHttpRequest.

Example

In this example, create a new HTML and a default HTML file. The default HTML file contains a div element with attribute w3-include-html which contains the new HTML file name.

The program reads the w3-include-html attribute value, makes an XMLHttpRequest with the file name, and loads the file.

A New HTML file renders inside the w3-include-html wrapper DOM after a successful file load. Else user gets an error message, and the program loads the file again.

Inner HTML file

html> body> header>b>HTML 2 HEADERb>header> div style="height: 100px;">div> footer>b>HTML 2 FOOTERb>footer> body> html> 

Main HTML file

html> body> h2>Program to include another HTML file in this HTML using i>w3-include-htmli>h2> div w3-include-html="result.html">div> script> function addHTML() < var el, i, domEl, fileName, xmlHttp; /*Iterate all DOM*/ el = document.getElementsByTagName("*"); for (i = 0; i < el.length; i++) < domEl = el[i]; /*find the element having w3-include-html attribute*/ fileName = domEl.getAttribute("w3-include-html"); if (fileName) < /*http request with attribute value as file name*/ xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function() < if (this.readyState == 4) < if (this.status == 200) < domEl.innerHTML = this.responseText; >if (this.status == 404) < domEl.innerHTML = "Page not found."; >/* Remove the attribute and invoke the function again*/ domEl.removeAttribute("w3-include-html"); addHTML(); > > xmlHttp.open("GET", fileName, true); xmlHttp.send(); /*function ends*/ return; > > > addHTML(); script> body> html> 

Output

Using the htmlinclude library to include an HTML file

In this section, we shall check how to use the htmlinclude library to include an HTML file.

Users can follow the syntax below to use this method.

Syntax

The syntax adds the javascript library file URL.

The include tag src contains the new HTML file name.

//Getting include attribute value let includes = document.getElementsByTagName('include'); for(var i=0; i); > function load_file(filename, callback) < fetch(filename).then(response =>response.text()).then(text => callback(text)); >
 

The syntax loads the source of the tag «include» using the fetch method.

Example

In this example, the htmlinclude library is available in the header. Creating an include tag with the new file name as the src attribute value.

Coming to the script, loading the include tag src value with the fetch method. If you get any error using fetch, try to get help from nodejs or any other program IDE.

Inner HTML file

html> body> b>htmlinclude library included this HTML fileb> body> html> 

Main HTML file

html> head> script src="https://unpkg.com/htmlincludejs">script> head> body> h2>Program to include another HTML file in this HTML using i>htmlinclude libraryi>h2> include src="./result.html">include> script> let includes = document.getElementsByTagName('include'); for (var i = 0; i < includes.length; i++) < let include = includes[i]; load_file(includes[i].attributes.src.value, function(text) < include.insertAdjacentHTML('afterend', text); include.remove(); >); > function load_file(filename, callback) < fetch(filename).then(response =>response.text()).then(text => callback(text)); > script> body> html> 

Output

Using an iframe to include an HTML file

In this section, let us check how to use an iframe to include an HTML file.

Users can follow the syntax below to use this method.

Syntax

The iframe tag includes the new HTML file name in the src.

Example

In this example, create a sample HTML file to include and main HTML file. The approach adds an iframe with the new HTML file name as the source value in the new HTML body.

The iframe loads the new HTML content inside the main HTML file.

Inner HTML file

html> body> div style="background-color: skyblue;">iframe included this HTML filediv> body> html> 

Main HTML file

html> head> h2>Program to include another HTML file in this HTML using i>iframei>h2> style> iframe[iframetag] < border: none; >style> head> body> div id="iframeDiv"> iframe src="result.html" iframetag>iframe> div> body> html> 

Output

This tutorial introduced four methods to include a new HTML file in an HTML file. The iframe method is simple to implement. Users can choose the jQuery load method if they need a jQuery method.

Источник

Самые простые способы обработки включений HTML в HTML

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

Например, сценарий использования для большей части всего Интернета, включение заголовка и футера для всех страниц:

Это не реально, кстати. Я просто хотел бы, чтобы вы поняли, о чем речь.

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

Люди искали другие языки, чтобы решить эту проблему. В некотором смысле, это предварительная обработка HTML. Задолго до того, как мы обрабатывали CSS, мы использовали инструменты для манипулирования HTML. И мы до сих пор делаем это, потому что идея включений полезна практически для любого веб-сайта в мире.

Использовать PHP

Можете ли вы использовать вместо этого PHP?

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

Использовать Gulp

Что может быть еще быстрее, чем на стороне сервера? Если включение предварительно обрабатывается еще до того, как оно будет на сервере. У Gulp есть множество процессоров, которые могут это делать. Одним из них является gulp-file-include. Это будет выглядеть так:

И вы бы обработали это так:

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

Использовать Grunt

Это то, что делает плагин grunt-bake. Вы настраиваете Grunt для обработки HTML:

Тогда HTML может использовать этот специальный синтаксис для включений:

Использовать Handlebars

У Handlebars есть партиалы. Вы регистрируете их:

И после этого используете:

Есть также причудливые функции, которые позволяют оценивать и передавать данные. Вам все еще понадобится процессор, чтобы запустить их, вероятно, что-то вроде gulp-handlebars. Говоря о языках шаблонов, которые используют фигурные скобки … Mustache тоже имеет их.

Использовать Pug

Pug — это препроцессор HTML с совершенно новым синтаксисом для HTML, который немного более лаконичен. Хотя он поддерживает включения.

Затем вы запускаете это с чем-то вроде gulp-pug.

Использовать Nunjucks

Я люблю Nunjucks! Nunjucks имеет включения. Мы бы сделали это так:

Если вы поместите это в файл с именем index.njk, то можете обработать его с помощью простого скрипта Node в index.html следующим образом:

Или обработайте это чем-то вроде gulp-nunjucks. 11ty имеет встроенный Nunjucks, как и большинство других, упомянутых до сих пор. Это может подойти вам, если вы на самом деле создаете маленький сайт.

Использовать Ajax

Вы можете получить содержимое для заголовка и футера из соответствующих файлов и вывести содержимое.

Говоря о JavaScript … Если вы создаете сайт с использованием практически любого JavaScript-фреймворка, построение с помощью компонентов является одной из основных идей, и разбивка на части, которые вы хотите включить в другие файлы, не должна стать проблемой. Что-то вроде import Header from «./header.js»; и является территорией React.

Использовать фреймы

Но содержимое в этих iframe не использует тот же DOM, поэтому это немного странно, не говоря уже о том, что этот стиль медленный и неудобный (поскольку iframes не знает высоты содержимого).

Скотт Джел задокументировал классную идею: вы можете заставить iframe внедрить свое содержимое на родительскую страницу, а затем удалить самого себя.

Использовать Jekyll

Jekyll — это генератор статических сайтов на основе Ruby с включениями. Вы сохраняете включения в папке /_includes/, а затем:

Jekyll — это отличный инструмент, так что я привожу здесь именно его, но есть еще куча генераторов статических сайтов, и, готов поспорить, что любой из них может сделать и это в том числе.

Использовать Sergey

Хорошо, я назову еще один SSG, потому что он довольно новый и очень компактный. В Sergey есть формат стиля веб-компонентов:

Вы задаете имена файлам header.html и footer.html, вставляете их в папку /includes/, а затем будет выполнена сборка с обработкой включений, когда вы запустите скрипт npm.

Использовать Apache SSI

Apache, супер-пупер общий веб-сервер, он может выполнять включения. Вы можете сделать это так:

Но вам нужна правильная конфигурация Apache, чтобы все было обработано правильно. Я старался изо всех сил, чтобы создать рабочую демо-версию, но мне не повезло. Я попытался использовать .htaccessв папке на сервере Apache и переключился на то, что мне показалось правильным:

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

Использовать CodeKit

Это только для Mac, но в CodeKit есть специальный язык, называемый Kit, суть 90% того, что он обрабатывает, это включения HTML. Он использует специальные комментарии HTML:

Использовать Dreamweaver

Lol, шутка. Но это действительно работает.

Черт побери. Это довольно много способов, не так ли?

Как я сказал в начале, меня очень удивительно, что сам HTML не обращался к этому напрямую. Не то чтобы я думал, что для производительности было бы хорошей идеей иметь операторы , запускающие сетевые запросы по всему коду, но это есть в других платформах. Использование импорта ES6 напрямую без упаковки тоже не всегда хорошая идея, но у нас это есть. Использование @import в CSS не всегда хорошая идея, но она у нас есть. Если бы у платформы был собственный синтаксис, возможно, другие инструменты смогли бы использовать это, подобно тому, как упаковщики JavaScript поддерживают формат импорта ES6.

Автор: Chris Coyier

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

Редакция: Команда webformyself.

Источник