How to include an HTML page into another HTML page without frame/iframe?
I want to include an HTML page inside an HTML page. Is it possible?
I don’t want to do it in PHP, I know that in PHP, we can use include for this situation, how can I achieve the same purely in HTML without using the iframe and frame concept?
15 Answers 15
You can use an object element
or, on your local server, AJAX can return a string of HTML (responseText) that you can use to document.write a new window, or edit out the head and body tags and add the rest to a div or another block element in the current page.
If you’re just trying to stick in your own HTML from another file, and you consider a Server Side Include to be «pure HTML» (because it kind of looks like an HTML comment and isn’t using something «dirty» like PHP):
If you mean client side then you will have to use JavaScript or frames.
Simple way to start, try jQuery
If you want to use IFrames then start with Wikipedia on IFrames
You could use HTML5 for this:
Update – July 2020: This feature is no longer supported by most major browsers, and is generally considered obsolete. See caniuse.com for the list of browsers which do still support it.
You will need to add some styling to this iframe. You can specify width, height, and if you want it to look like a part of the original page include frameborder=»0″ .
There is no other way to do it in pure HTML. This is what they were built for, it’s like saying I want to fry an egg without an egg.
If you’re willing to use jquery, there is a handy jquery plugin called «inc».
I use it often for website prototyping, where I just want to present the client with static HTML with no backend layer that can be quickly created/edited/improved/re-presented
For example, things like the menu and footer need to be shown on every page, but you dont want to end up with a copy-and-paste-athon
Как подключить отдельную страницу HTML к сайту
Бывают ситуации, когда необходимо подключить отдельную страницу к сайту, которая была сделана в другом редакторе: от вёрстки, до разновидностей Adobe.
Так же вы сами можете создать отдельную страницу html или bootstrap и подключить её к сайту и редактировать по своему усмотрению. Данная тема очень удобна для тех, кто продаёт шаблоны и таким образом клиенту можно предоставить живую демо версию.
Я покажу это на примере.
Допустим у вас есть вот такой шаблон
вы скачиваете этот шаблон в формате zip и загружаете на хостинг либо в отдельный субдомен, либо в основной сайт
после загрузки архив появится в списке файлов. Теперь вам нужно создать отдельную папку, куда вы извлечёте этот архив. Пусть эта папка будет называться abc
В открывшемся окне выберите Тип: Каталог и ниже напишите его имя (у меня abc) и сохраните. Папка появится в списке
теперь в эту папку необходимо извлечь скачанный архив. Для этого выберите архив, нажмите вверху Извлечь и укажите папку куда он должен быть извлечён и нажмите Ок
В папке abc откройте Templates, там находятся страницы, которые идут в этом шаблоне. Посмотреть что получилось
Адрес страницы будет иметь вид https://ваш сайт/abc/templates/index.html
Вы можете назвать страницу как угодно, она будет доступна. Рекомендую изменить название страницы, потому что index.html уже может быть на вашем хостинге и это вызовет противоречия в дальнейшем.
Если вы хотите получить другой адрес страницы, такой как https://ваш сайт/index.html, то для этого необходимо сначала изменить название. Я назову её homelab.html и скопирую в корень сайта
Страница станет доступна по прямому адресу вашсайт/homelab.html но она будет отображена некорректно, потому что в коде страницы остались относительные пути к файлам, которые лежат у нас в папке, но не прописаны в коде самой страницы. Необходимо открыть её и прописать корректные пути.
Вы можете отредактировать содержимое файла во внешнем редакторе, либо на самом хостинге. Это не на всех хостингах удобно, я пользуюсь AdminVPS здесь можно отредактировать файлы на самом хостинге.
Итак, открываете ваш сайт homelab на хостинге и редактируете пути в соответствующим файлам. Например, у вас есть файл
<!— Templates core CSS —> <link href="stylesheets/application.css" rel="stylesheet">
Здесь линк указывает на файл application.css который лежит в папке stylesheets. В свою очередь эта папка у нас лежит в папке templates а эта папка в папке abc
таким образом путь получается такой
<link href="abc/templates/stylesheets/application.css" rel="stylesheet">
Подобным образом, вам нужно изменить все пути на странице. Обратите внимание, что пути нужно редактировать у ссылок, которые начинаются с link href = и src =
Что мы имеем в итоге? Чиcтый код страницы, который не связан с wordpress, но в то же время присутствующий внутри доменного имени, с отличной скоростью для мобильных. Подобным образом вы можете создавать, добавлять, редактировать страницы внутри темы wordpress по своему усмотрению или создавать их статические версии.
Если остались вопросы, то вы можете задавать их в комментариях или по почте.
Как добавить страницу на сайт html
Скопируйте и сохраните этот HTML-код как делали это Здесь
С единственным отличием — файл будете сохранять не с названием index.html (index.html — означает что это будет галавная страница) — а с новым названием page.html .( просто страница )
Затем заполняйте новую страницу в текстовом редакторе — блокнот.
<!DOCTUPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN «>
<html>
<head>
<title> Название Страницы </title>
</head >
<body>
<center>
<table width=»1280″ height=»240″ border=»2″ cellpadding=»2″ cellspacing=»2″>
<tr>
<td valign=»top»width=»1280″background=»img/header.jpg» border=»2″cellpadding=»2″ cellspacing=»2″> здесь будет шапка сайта </td>
</tr>
</table>
<table width=»1280″ height=»380″ border=»2″ cellpadding=»2″ cellspacing=»2″>
<tr>
<td valign=»top» width=»240″border=»2″> здесь будет левое меню </td>
<td valign=»top» width=»740″border=»2″> здесь будет содержимое страницы </td>
<td valign=»top» width=»300″border=»2″> здесь будет правое меню </td>
</tr>
</table>
<table width=»1280″ height=»80″ border=»2″ cellpadding=»2″ cellspacing=»2″>
<tr>
<td valign=»top»> подвал страницы </td>
</tr>
</table>
Что бы соединить страницу с именем index.html с страницей с именем page.html .
Нужно на странице index.html в строке
<td valign=»top» width=»240″border=»2″> здесь будет левое меню </td>
вместо здесь будет левое меню написать ссылку на страницу page.html .
Ссылка
<a href=»page.html»> На вторую </a>
пример :
<!DOCTUPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN «>
<html>
<head>
<title> Название Страницы </title>
</head >
<body>
<center>
<table width=»1280″ height=»240″ border=»2″ cellpadding=»2″ cellspacing=»2″>
<tr>
<td valign=»top»width=»1280″background=»image/header.jpg» border=»2″cellpadding=»2″ cellspacing=»2″> здесь будет шапка сайта </td>
</tr>
</table>
<table width=»1280″ height=»380″ border=»2″ cellpadding=»2″ cellspacing=»2″>
<tr>
<td valign=»top» width=»240″border=»2″> <a href=»page.html»> На вторую </a> </td>
<td valign=»top» width=»740″border=»2″> здесь будет содержимое страницы </td>
<td valign=»top» width=»300″border=»2″> здесь будет правое меню </td>
</tr>
</table>
<table width=»1280″ height=»80″ border=»2″ cellpadding=»2″ cellspacing=»2″>
<tr>
<td valign=»top»> подвал страницы </td>
</tr>
</table>
И что бы соединить вторую страницу с именем page.html с главной страницей с именем index.html
Нужно на странице page.html написать ссылку на главную .
Ссылка
<a href=»index.html»> На главную </a>
пример:
<!DOCTUPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN «>
<html>
<head>
<title> Название Страницы </title>
</head >
<body>
<center>
<table width=»1280″ height=»240″ border=»2″ cellpadding=»2″ cellspacing=»2″>
<tr>
<td valign=»top»width=»1280″background=»image/header.jpg» border=»2″cellpadding=»2″ cellspacing=»2″> здесь будет шапка сайта </td>
</tr>
</table>
<table width=»1280″ height=»380″ border=»2″ cellpadding=»2″ cellspacing=»2″>
<tr>
<td valign=»top» width=»240″border=»2″> <a href=»index.html»> На главную</a> </td>
<td valign=»top» width=»740″border=»2″> здесь будет содержимое страницы </td>
<td valign=»top» width=»300″border=»2″> здесь будет правое меню </td>
</tr>
</table>
<table width=»1280″ height=»80″ border=»2″ cellpadding=»2″ cellspacing=»2″>
<tr>
<td valign=»top»> подвал страницы </td>
</tr>
</table>
Сайт на основе одной HTML-страницы
Сейчас наступило интересное время, когда одни новые технологии стремительно меняются другими новыми, которые тоже быстро меняются. Положительная производная этого процесса в том, что, пока крутится этот технологический калейдоскоп, работа для девелопера найдётся. Но, иногда возникают задачи, для решения которых, говоря образным языком, лучше подойдёт не новая бензопила, а пилочка в старом перочинном ножике.
В статье показан приём разработки сайта, когда основной результат достигается за счёт использования базовых механизмов открытых стандартов.
Архитектура: Frontend, статический HTTP-сервер, XmlHttpRequest (XHR), REST.
IDE: Notepad, Notepad++ (Windows), Gedit (Linux).
Совместимость: браузер должен поддерживать JavaScript и HTML DOM.
Суть приёма
Сайт разрабатывается на основе HTML-страницы, через которую организован доступ к файлам контента. HTML-страниц, по замыслу разработчика, может быть сколько угодно, но, для достижения полной функциональности, и одной будет достаточно. В HTML-странице, ссылки на файлы контента, описываются в виде обычных HTML-ссылок, по правилам REST. За счёт расположения ссылок в одном месте, достигается ссылочная целостность.
Контент располагается в текстовых файлах и представляет собой текст, отформатированный типовой HTML-разметкой. Ограничений на расположение файлов контента нет, но будет логично, если их разместить в тематических разделах (директориях). Файлы контента не имеют связи с HTML-страницей и могут быть показаны на одной или нескольких HTML-страницах.
Сперва подгружается HTML-страница. Затем определяется и подгружается файл контента. Имя файла контента прописано в URL HTML-ссылки и определяется по правилам REST. Подгрузка файла контента осуществляется через XHR.
Ограничений никаких нет. Дизайн, код, наименования переменных и другие девелоперские соглашения — типовые для подобных разработок. Нет никакой специальной разметки, обычно применяемой для шаблонов.
Всё это немного напоминает SSI, только на Frontend-е.
Как это работает
Считать URL HTML-ссылки и определить параметры:
Количество и наименование параметров определяет разработчик, главное, чтобы в HTML-cтранице, был предусмотрен функционал по их обработке.
Загрузить и отобразить контент:
В параметре «id» задано расположение файла контента, которое определяется после загрузки HTML-cтраницы:
HTML-ссылка составлена так, что HTML-страница ссылается на саму себя, но с разными значениями параметра «id»:
Для добавления нового контента, надо просто создать файл контента и добавить HTML-ссылку. Расширение файла контента может быть любым, но будет удобнее, если оно будет соответствовать известному MIME-типу, например «txt» или «htm». Так будет проще перенести сайт на внешний ресурс.
Это ключевые аспекты для создания информационного сайта. Интерактивность, при необходимости, может быть добавлена на основе веб-сервисов. Если же используется больше одной HTML-страницы, то можно, например, разработать одно меню для всех страниц, которое будет загружаться по тому же принципу, что и контент. Это облегчит поддержание ссылочной целостности, но расплатой будет лишний XHR запрос.
Как вместо файла контента вставить HTML-страницу
Чтобы в базовую HTML-страницу вставить другую HTML-страницу, проще всего использовать HTML-тег iframe. В этом случае XHR не нужен. В URL надо добавить ещё один параметр, например «iframe», и обрабатывать его при загрузке базовой HTML-страницы:
Ключевое отличие состоит в том, что файл контента встроится в DOM базовой HTML-страницы и будет обработан единым CSS, а HTML-страница, подгруженная в iframe, нет.
Когда HTML-страница расположена не в корне
Бывает нужно разработать не весь сайт, а, например, тематический раздел. Чтобы HTML-ссылки оставались актуальными, надо учитывать путь к разделу:
Так выглядит, например, код примера к статье на GitHub-е.
Готовый шаблон
Если остались вопросы, то можно посмотреть демо сайта (GitHub) и скачать шаблон сайта (GitHub). Демо и шаблон представляют собой готовый макет и наполнены безобидным контентом.
Разработку можно вести на любом статическом HTTP-сервере, установленном локально, а потом перенести «как есть» в любое место сети.