Как обрабатывать общий код в нескольких HTML с помощью javascript или jQuery

Ответ 1

Существует несколько способов добиться этого включения, чтобы ваш код был более удобным.

PHP

Конечно, первое, что приходит на ум, - это если вы хотите использовать PHP, это использование include() которое включает и оценивает код в вашем внешнем файле или скрипте.

Вы можете использовать его как таковое:

<?php include('path/to/file.html'); ?>

Заметка! Будьте осторожны: ваш файл контейнера должен быть .php файлом, чтобы эта директива была оценена с сервера. Вам не нужно ничего делать, кроме изменения расширения файла, чтобы это произошло. И, конечно же, убедитесь, что ваш сервер может анализировать PHP.

Кроме того, остерегайтесь разницы с include_once(), которые я бы не рекомендовал в этом случае.

SSI (на стороне сервера)

Если вы не хотите использовать PHP, вы можете сделать это очень просто и чисто, а на стороне сервера - ^{[ Википедия ]}. SSI выглядит как комментарий HTML:

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

Заметка! Вам необходимо убедиться, что mod_include установлен и включен на вашем сервере Apache и добавить следующую директиву в файл httpd.conf или .htaccess:

Options +Includes

Прочтите ссылку doc выше для получения дополнительной информации.

Клиентская сторона включает

Ваш вопрос на самом деле указывает на это в JS или jQuery. Не уверен, что это происходит, потому что вы не знали о вариантах на стороне сервера, или если вам действительно нужна клиентская сторона. В любом случае, есть также некоторые клиентские решения.

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

Элемент IFrame

Элемент <iframe> содержит контент из внешнего файла в отдельной области на вашей странице. Вы можете использовать его так:

<iframe src="your.html" width="x" height="y"><p>Fallback text</p></iframe>

Элемент объекта

Элемент <object> выполняет аналогичную функцию с <iframe>, но в то время как последний больше разработан как средство для песочницы для приложения, первый элемент более интегрирован в вашу страницу. Используется следующее:

<object type="text/html" data="your.html"></object>

Вставка Javascript

Преобразуйте код в файл Javascript и проинструктируйте файл вставить содержимое в DOM. Вот пример

external.js

var element = '<div>
                   <ul>
                     <li class="current"><a href=".html" ></a></li>
                     <li><a href=".html"></a></li>
                     <li><a href=".html"></a></li>
                     <li><a href=".html"></a></li>
                   </ul>
               </div>';

container.html

<script type="text/javascript" src="external.js"></script>
<script>
     document.getElementById('#containing-element').innerHTML(element);
</script>

AJAX

jQuery может помочь вам справиться с некоторыми вызовами AJAX. Вы можете использовать jQuery.get() или jQuery.load(). Я бы предложил использовать последний, поскольку load() вводит загруженный элемент непосредственно в DOM, а также, поскольку вы можете точно указать, какую часть загружать, что отличает, особенно если вы хотите сохранить все свои включения в один внешний HTML-код файл.

jQuery(document).ready(function ($){
    $('#containing-element').load('your.html');
});

Ответ 2

Если вы используете php, вы можете иметь этот код в одном файле и использовать include 'filename.php';

http://php.net/manual/en/function.include.php

Ответ 3

У вас уже есть ответ для PHP, но если вы не хотите или не можете его использовать, вы можете сохранить его в JS файле: test.js

document.write('<div>\n\
  <ul>\n\
    <li class="current"><a href=".html" ></a></li>\n\
    <li><a href=".html"></a></li>\n\
    <li><a href=".html"></a></li>\n\
    <li><a href=".html"></a></li>\n\
  </ul>\n\
 </div>');

и включить его:

<script type="text/javascript" src="test.js"></script>

Но, конечно, лучше с PHP.