Как повторно использовать части веб-страницы (используя div)?

Question

У меня есть несколько HTML-страниц, которые разделяют область меню. Каждый раз, когда я обновляю область меню (например, с помощью «последних новостей»), мне нужно обновить все 10 страниц вручную.

С фреймами все они указывают на одну и ту же страницу фрейма, поэтому мне нужно изменить только одну страницу. Но мне сказали, что фреймы плохие, и я должен использовать div. Есть ли простой способ сделать это с помощью divs? (желательно без JQuery или Ajax)

Answer 1

Вы можете использовать iframe. Это все еще своего рода фрейм, но вы должны избегать страницы frameset-index-page, и если вы установите границы на 0, а контент, который вам подходит, даже не увидит границ или полос прокрутки и будет вести себя как div

<iframe style="border-width:0px;" src="news.html"/>

Вы должны использовать фиксированную высоту ширины, хотя, чтобы избежать полос прокрутки. Для меня это самое простое «html-only» решение вашей проблемы.

Answer 2

Вы можете использовать функцию jQuery load().

Вы должны добавить следующее в заголовок каждой из ваших страниц:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Затем вам нужно добавить следующий DIV, куда вы хотите загружать контент.

<div id="breakingNews"></div>
<script type="text/javascript" src="http://example.com/news.js"></script>

Обязательно отредактируйте ссылку на файл news.js.

Затем вы создадите news.js на своем сервере и добавите следующий код:

$('#breakingNews').load('path/to/breakingnews.html');

Подробнее о load(): http://api.jquery.com/load/

Answer 3

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

Используя шаблонизацию ICanHaz.js, http://icanhazjs.com/, вы можете хранить html как объекты. Затем либо включите их непосредственно в файлы .js, либо сделайте ajax-запросы для них.

Answer 4

Не очень хорошее решение, но если вы действительно хотите иметь единый пункт определения меню, включите его в скрипт, который включает в себя функцию setMenu, и вы загружаете скрипт в заголовок каждой страницы и вызываете функцию setMenu на каждом нагрузка на тело страницы, которая затем устанавливает меню как innerHTML для div, который вы включаете в каждую страницу, в частности, в качестве заполнителя меню.