2016-08-08 3 views
7

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

Include another HTML file in a HTML file

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

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

/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?

+0

Я не понимаю, почему он не должен работать, как описано в приведенной ссылке. –

ответ

14

Я думаю, что лучший способ включить html-содержимое/файл в другой html-файл с помощью jQuery.

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

Например

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

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

Там нет таких доступных через включить файл тегов, но Есть некоторые методы третьей стороны доступный как это.

<!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> 

Некоторые люди также использовали

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

, похоже, работает на меня – Happydevdays

+0

Хорошо thn ,,,, :-) –

+1

Решение jquery очень простое, хорошая работа –

-1

Использование PHP включают

так сохранить голову как 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 это делать.

+2

Оригинальный плакат не упоминал о PHP и, возможно, даже не знает о PHP. Их веб-сервер не может быть настроен или загружен PHP, поэтому просто переименование файлов может ничего не делать. Таким образом, этот ответ не очень полезен, поскольку он не имеет никакого контекста. – Lee

+1

@ Не нужно отмечать его. Это дает возможность получить то, что хочет OP с помощью простого кода, не нуждается в знаниях php. Если OP не хочет идти по моему маршруту, это их выбор. Это то, что я сделал бы в позиции OP. –

+0

Я не согласен с вами в OP, не нуждающемся в знаниях PHP. Конечно, им нужны базовые знания того, с чем они пишут, или они просто пойдут по голове и запутают их. Я отметил это, потому что это не очень полезный ответ, потому что вы говорите о совершенно другом языке программирования, но вы не ввели его в введение. И я понимаю, что они не должны следовать вашему ответу, это совершенно не важно. Я думаю, что нисходящий союз оправдан. – Lee

0

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

я столкнулась с подобной проблемой, то я использовал

< IFRAME SRC = "b.html" высота = "80px "ширина =" 500px ">

0

мне нужно для включения большого количества файлов.Таким образом, я создал следующий скрипт:

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

Использование DIV, например, поместить заполнители для вставки.

<div id="example-include"></div>

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