HTML5 включает файл

Как лучше всего использовать кросс-браузер для включения HTML файла в HTML5.

Я создаю сайт в HTML5 и хотел бы иметь навигацию в одном отдельном файле и включаться в страницы сайта.

Ответ 1

Используйте тег object:

<object name="foo" type="text/html" data="foo.inc"></object>

foo.inc должен включать допустимый HTML.

Примечание. НЕ используйте самозакрывающийся стиль <object/>. Это предотвратит отображение содержимого после отображения тега.

Ответ 2

<object> отлично работает, хотя он не является самозакрывающимся тегом, поэтому он должен выглядеть так (в противном случае он недействителен HTML5):

<object name="foo" type="text/html" data="foo.inc"></object>

<embed> также можно использовать для включения внешнего содержимого html (и любого типа MIME):

<embed type="text/html" src="foo.inc">

Ответ 3

Для HTML5 вы можете попробовать:

<head>
    <link rel="import" href="/path/to/imports/stuff.html">
</head>

(https://www.html5rocks.com/en/tutorials/webcomponents/imports/)

Если эта функция не реализована в целевом браузере, вы можете использовать веб-компоненты polyfill: http://webcomponents.org/polyfills/

Ответ 4

Если вы пишете чистый HTML, включить файлы не представляется возможным. Тем не менее, вы можете использовать функцию серверной части Apache (SSI), или вы можете использовать некоторые языки сценариев (Python, Ruby, PHP и т.д.) Для сборки страниц.

Ответ 5

Хорошо, это все действительные ответы, но кроме метода javascript остальные довольно ограничены.

Строка php строго привязана к провайдеру.
объект и вставлять вместо этого включают код без какого-либо стиля (кроме случаев, когда вы объявляете его во включенном файле).

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

Ответ 6

Правильный способ заключается в использовании серверной части. Для решения PHP требуется, чтобы PHP был установлен только для включения файлов, html-решения не поддерживаются спецификацией, даже если они работают (спецификация не различает типы mime, но она указывает свое намерение, что означает, что она может быть явно предотвращается в будущем, если эти теги не просто полностью устарели).

Здесь мой пост из аналогичной темы, спрашивающей о том же:

Если ваш сервер поддерживает SSI (на стороне сервера), вы можете поместить следующее в свои html файлы, не требуя языка сценариев или что-то еще. Apache имеет SSI включен по умолчанию (я думаю?)

<!--#include file="same_path_file.html" -->
<!--#include virtual="docroot_file.html" -->

"файл" относится к текущему файлу и, вероятно, к тому, что вы будете использовать для включения связанных файлов, таких как "actual_article_poll.html".

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

Не имеет значения, какой из них вы выберете, но полезно знать разницу между ними.

Кроме того, директива include делает новый внутренний HTTP-запрос для сервера для каждого файла, поэтому вы можете включить php файлы и подобные, и они будут выполнены так, как они должны.

Здесь полезный обзор SSI: http://en.wikipedia.org/wiki/Server_Side_Includes

Ответ 7

Я не знаю, как это сделать в HTML, но если бы вы сделали это на PHP, это достаточно просто, если бы у вас была определенная панель навигации, которую вы хотели включить, на каждую страницу, которую вы только что поставили:

<?php include('nav.php') ?>

Поместите код HTML на отдельную страницу для навигатора, и PHP будет автоматически помещать его туда каждый раз. И вам не нужно знать PHP, чтобы создавать PHP-страницы как таковые, вы можете просто использовать общую разметку HTML в файле PHP, и она будет работать нормально.

Ответ 8

HTML5 состоит из трех компонентов: HTML, CSS и JavaScript. Поэтому мы должны использовать их все, чтобы использовать HTML5.

Внешний HTML-код может быть включен в другой html-документ с использованием javascript. Единственное, что вы должны хранить внешний код в файле .js. Вот пример того, как включить html-абзац:

<!DOCTYPE html>
<html>
    <head>
    <title>Main Page</title>
        <script type="text/javascript" src="include_html.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            paragraph();
        </script>
    </body>
</html>

Содержание include_html.js

function paragraph()
{
        document.write("<p> This is an HTML paragraph </p>");
}