Включение другого HTML-файла в HTML-файл

На мой взгляд, лучшим решением является использование jQuery:

a.html:

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



     <div id="includedContent"></div>

b.html:

<p>This is my include file</p>

Этот метод является простым и чистым решением моей проблемы.

Документация по jQuery .load() находится здесь.

Расширение Лоло'ы ответ сверху, здесь немного больше автоматизации, если вы должны включать много файлов:

<script>
  $(function(){
    var includes = $('[data-include]');
    jQuery.each(includes, function(){
      var file = 'views/' + $(this).data('include') + '.html';
      $(this).load(file);
    });
  });
</script>

А потом включить что-то в HTML:

<div data-include="header"></div>
<div data-include="footer"></div>

Который будет включать views/header.html файл и views/footer.html

Мое решение похоже на решение lolo выше. Однако я вставляю HTML-код через JavaScript'document.write вместо использования jQuery:

a.html:

  <h1>Put your HTML content before insertion of b.js.</h1>
      ...

  <script src="b.js"></script>

      ...

  <p>And whatever content you want afterwards.</p>

b.js:

document.write('\
\
    <h1>Add your HTML code here</h1>\
\
     <p>Notice however, that you have to escape LF's with a '\', just like\
        demonstrated in this code listing.\
    </p>\
\
');

Причина, по которой я не использую jQuery, заключается в том, что jQuery.js имеет размер ~90kb, а я хочу, чтобы количество загружаемых данных было как можно меньше.

Для того чтобы получить правильно экранированный файл JavaScript без особых усилий, вы можете использовать следующую команду sed:

sed 's/\\/\\\\/g;s/^.*$/&\\/g;s/'\''/\\'\''/g' b.html > escapedB.html

Или просто используйте следующий удобный bash-скрипт, опубликованный как Gist на Github, который автоматизирует всю необходимую работу, преобразуя b.html в b.js: https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6

Благодарность Greg Minshall за улучшенную команду sed, которая также экранирует обратные слэши и одинарные кавычки, которые моя первоначальная команда sed не учитывала.

Альтернативно для браузеров, поддерживающих шаблонные литералы, работает следующее:

b.js:

document.write(`

    <h1>Add your HTML code here</h1>

     <p>Notice, you do not have to escape LF's with a '\',
        like demonstrated in the above code listing.
    </p>

`);

Оформить заказ на HTML5 импорта через Html5rocks учебник и в полимерным проекта

Например:

Промоушен библиотеки, что я написал решить эту проблему.

https://github.com/LexmarkWeb/csi.js

<div data-include="/path/to/include.html"></div>

Выше возьмут на содержание /path/to/include.html и заменить див с ним.

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

В очень старое решение я ее удовлетворял мои потребности, но здесь's, Как сделать это совместимый со стандартами код:

<p>backup content</p>

Не нужны скрипты. Нет необходимости делать какие-либо фантазии на стороне сервера вещи (хотя это, вероятно, будет лучшим вариантом)

Так как старые браузеры не'т поддерживать бесшовные, вы должны добавить некоторые CSS, чтобы исправить это:

iframe[seamless] {
    border: none;
}

Имейте в виду, что для браузеров, которые Дон'т бесшовных поддержки, если вы нажмете на ссылку в iframe он будет делать frame перейти по этому URL-адресу, а не все окно. Способ обойти это, чтобы иметь все ссылки есть цель=на"_parent"` В, хотя поддержка браузеров есть "достаточно хорошо и".

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

RemoveHandler .html
AddType application/x-httpd-php .php .html

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

<?php include('b.html'); ?>

Следующие работы, если HTML-содержимого из какой-либо файл должен быть включен: Например, следующая строка будет включать в себя содержимое piece_to_include.html в том месте, где определение объекта происходит.

...text before...

Warning: file_to_include.html could not be included.

...text after...

Ссылка: http://www.w3.org/TR/WD-html40-970708/struct/includes.html#h-7.7.4

Это то, что помогло мне. Для добавления блока HTML-кода b.html в a.html это должно войти в голове тег a.html:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Затем в теге body, контейнер выполнен с уникальным ID и блок JavaScript загрузить `b.html в контейнер следующим образом:

<div id="b-placeholder">

</div>

<script>
$(function(){
  $("#b-placeholder").load("b.html");
});
</script>

Я знаю, что это очень старый пост, так что некоторые методы не были доступны тогда. Но вот мой очень простой взять на нем (на основе Лоло'ы ответ).

Он опирается на данные-* в HTML5 атрибутов и поэтому является очень универсальным, который использует jQuery'ы для каждой функции, чтобы получить каждый .соответствия на &quot класса;нагрузка-HTML-код" и использует соответствующие 'источник данных' атрибут для загрузки содержимого:

<div class="container-fluid">
    <div class="load-html" id="NavigationMenu" data-source="header.html"></div>
    <div class="load-html" id="MainBody" data-source="body.html"></div>
    <div class="load-html" id="Footer" data-source="footer.html"></div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
    $(".load-html").each(function () {
        $(this).load(this.dataset.source);
    });
});
</script>

В w3.js включают в себя работы такой:

<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>

Для правильной описание смотреть в этот: https://www.w3schools.com/howto/howto_html_include.asp

Вы можете использовать полифилл импорта в формате HTML (https://www.html5rocks.com/en/tutorials/webcomponents/imports/), или что упрощенное решение https://github.com/dsheiko/html-import

Например, на странице импорта HTML блок так:

Блок может иметь импортирует самостоятельно:

Импортер заменяет директиву с загруженной HTML-код очень похож на СКУ

Эти директивы будут обслуживаться автоматически, как только вы загрузите этот небольшой JavaScript-код:

<script async src="./src/html-import.js"></script>

Это будет процесс импорта, когда дом будет готов автоматически. Кроме того, он предоставляет API, который можно использовать для запуска Вручную, чтобы получить журналы, и так далее. Наслаждайтесь :)

Большинство решений не работает, но у них есть проблема с на jQuery:

Вопрос следующий$(документ код).готовые(функция () { оповещения($(" и#includedContent и").текст()); } предупреждений ничего, вместо того, чтобы известить содержания.

Я пишу ниже код, в моем решение, вы можете получить доступ к входит содержание в `$(документ).готовая функция:

(Ключ загрузки включен контент синхронно).

index.htm:

        <script src="jquery.js"></script>

        <script>
            (function ($) {
                $.include = function (url) {
                    $.ajax({
                        url: url,
                        async: false,
                        success: function (result) {
                            document.write(result);
                        }
                    });
                };
            }(jQuery));
        </script>

        <script>
            $(document).ready(function () {
                alert($("#test").text());
            });
        </script>



        <script>$.include("include.inc");</script>

включают в себя.Инк:

<div id="test">
    There is no issue between this solution and jquery.
</div>

jQuery как включить плагин на GitHub

Чтобы вставить содержимое данного файла:

В Асари´ы ответ (первый!) было слишком много убедительных! Очень Хорошо!

Но если вы хотите, чтобы передать имя страницы, которые должны быть включены в качестве параметра URL-адреса этот пост уже очень хорошее решение, чтобы быть использованы в сочетании с:

http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html

Так что это будет что-то вроде этого:

Ваш URL-адрес:

www.yoursite.com/a.html?p=b.html

В a.html код становится:

    <script src="jquery.js"></script> 
    <script> 
    function GetURLParameter(sParam)
    {
      var sPageURL = window.location.search.substring(1);
      var sURLVariables = sPageURL.split('&');
      for (var i = 0; i < sURLVariables.length; i++) 
      {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
      }
    }​
    $(function(){
      var pinc = GetURLParameter('p');
      $("#includedContent").load(pinc); 
    });
    </script> 



     <div id="includedContent"></div>

Он работал очень хорошо для меня! Надеюсь помог :)

html5rocks.com есть очень хороший учебник по этой вещи, и это может быть немного поздно, но сам я этого'т знаю, что это существовало. w3schools имеет способ сделать это, используя свои новые библиотеки под названием w3.js. Дело в том, что это требует использование объекта web-сервера и класса HttpRequest. Вы можете'т на самом деле загрузить эти локально и проверить их на вашем компьютере. Что вы можете сделать, это использовать полифиллы, представленная на html5rocks ссылке вверху, или следовать их учебник. С немного JS и магии, вы можете сделать что-то вроде этого:

 var link = document.createElement('link');
 if('import' in link){
     //Run import code
     link.setAttribute('rel','import');
     link.setAttribute('href',importPath);
     document.getElementsByTagName('head')[0].appendChild(link);
     //Create a phantom element to append the import document text to
     link = document.querySelector('link[rel="import"]');
     var docText = document.createElement('div');
     docText.innerHTML = link.import;
     element.appendChild(docText.cloneNode(true));
 } else {
     //Imports aren't supported, so call polyfill
     importPolyfill(importPath);
 }

Эта ссылка (может изменить для того чтобы быть разыскиваемый элемент link, если уже установлен), установить ввоз (если у вас уже есть), а затем добавить его. Его потом оттуда взять и разобрать этот файл в HTML, а затем добавить его на нужный элемент в див. Это все может быть изменено, чтобы соответствовать вашим потребностям с добавлением элемента по ссылке, которую вы используете. Я надеюсь, что это помогло, может теперь не имеет значения, если новее, быстрее, стороны вышли без использования библиотек и фреймворков, таких как jQuery или W3.js.

Обновление: это выдаст ошибку, сказав, что местные импорт был заблокирован политики CORS. Может понадобиться доступ в сеть, чтобы иметь возможность использовать это из-за свойства глубокого интернета. (Имеется в виду не практическое использование)

Нет прямой HTML-решений для задач в настоящее время. Даже HTML импорты (который постоянно в проекте) не буду делать вещи, потому что импорт != Включать и какого-нибудь JS магия будет в любом случае. Недавно я писал а VanillaJS сценарий это только для включения HTML в формате HTML, без каких-либо осложнений.

Просто место в вашем a.html

<script src="wm-html-include.js"> </script>  

Он является открытым исходным кодом и может дать идею (я надеюсь)

Вы можете сделать это с помощью JavaScript'библиотека с помощью jQuery такой:

HTML-код:

<div class="banner" title="banner.html"></div>

ДШ:

$(".banner").each(function(){
    var inc=$(this);
    $.get(inc.attr("title"), function(data){
        inc.replaceWith(data);
    });
});

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

Также, обратите внимание, что если вы загружаете свой контент с помощью JavaScript, Google не сможет проиндексировать его, чтобы он's не совсем хороший метод для SEO причинам.