Включить html в другой html файл

У меня есть шаблон html "head" и шаблон навигации, который я хочу включить во все мои другие html файлы для моего сайта. Я нашел этот пост:

Включить другой HTML файл в файл HTML

И мой вопрос: что, если это заголовок, который я хочу включить?

Так, например, у меня есть следующая файловая структура:

 /var/www/includes/templates/header.html
                             navigation.html

header.html может выглядеть следующим образом:

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Test Portal</title>

 </head>

В таком случае, могу ли я продолжать следовать примеру в другом сообщении, где они создают div и заполняют div через jquery?

Ответы

Ответ 1

Способ 1:

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

Вы можете просто включить jQuery.js и загрузить файл HTML, используя $("#DivContent").load("yourFile.html");

Например

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#DivContent").load("another_file.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="DivContent"></div>
  </body> 
</html>

Способ 2:

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

<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>

<body>

<div w3-include-html="content.html"></div> 

<script>
w3IncludeHTML();
</script>

</body>
</html>

Способ 3:

Некоторые люди также использовали серверные включения (SSI):

<!--#include virtual="a.html" -->

Ответ 2

Мне нужно было включить много файлов. Поэтому я создал следующий script:

<script>
  $(function(){
    $('[id$="-include"]').each(function (e){
        $(this).load("includes\\" + $(this).attr("id").replace("-include", "") +  ".html");
    });
  });
</script>

Ответ 3

Использование тега HTML.

У меня возникла аналогичная проблема, затем я использовал

< iframe src= "b.html" height = "80px" width = "500px" >

Ответ 4

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

<object data="filename.html"></object>

Ответ 5

Использовать php include

чтобы сохранить голову как head.php и в каждом файле, который вы хотите добавить в голову

<?php include 'path/to/file/head.php';?>

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

поэтому ваш документ для представления будет выглядеть примерно так.

<?php include 'head.php';?>
<body>
    <?php include 'navigation.php';?>

    <!-- page content -->

    <?php include 'footer.php';?>
</body>

Не забудьте сохранить ваши файлы в виде файлов php, а не html.