Включения HTML-документов на стороне клиента (пример 1)

     Включить в один HTML-документ содержание нескольких других, хранящихся в отдельных файлах, можно на основе так называемой технологии SSI (Server Side Includes, включения на стороне сервера). Вставки в ваш HTML-документ в этом случае делает сервер. В HTML есть средство для вставок в вашу страницу других HTML-документов, которые производил бы компьютер клиента. Это тэг < iframe>:
     < iframe src="адрес_документа" width="x" height="y" scrolling=yes>< /iframe>
     Браузер Netscape не поддерживает, кажется, этот тэг.
     В IE выводится окно указанных размеров, в котором показывается указанный HTML-документ. Если размеры окна слишком малы, то появляется полоса прокрутки.
     Ниже приведен пример вставки документа из файла html1.htm, содержащего картинку, ссылку и кнопку. При этом мы сделали две вставки одного и того же документа в разные окна.

Еще пример использования тэга < iframe>

Далее я предлагаю вашему вниманию другой способ решения этой же задачи. Я опишу два примера. Один из них, последовательное включение документов друг за другом, рассматривается на этой странице. Другой пример, включение документов с замещением, можно посмотреть здесь.

Суть предлагаемого способа состоит в следующем.
1. На странице, в которую следует вставить несколько HTML-документов, следует написать скрипт, содержащий список адресов HTML-документов (оформленный в виде массива) и вызов файла со скриптом, который делает собственно вставку (об этом чуть позже).
Вот пример скрипта со списком из 2-х HTML-документов:
<script> // Определение списка загружаемых HTML-файлов var aurl=new Array(); // массив адресов HTML-документов aurl[0]="html1.htm"; aurl[1]="html2.htm"; var tabwidth=800; // ширина таблицы, в которой будут показаны HTML-документы </script> <! вызов процедуры вставки HTML-документов> <script src='crhtml.js'></script>

2. Процедура вставок, содержащаяся в нашем примере в файле crhtml.js, имеет следующий код:
// Вставка HTML-документов var xobject = new Array(); // Элемемент управления БД (STD) xobject[0] = '<OBJECT ID="idobj' // id xobject[1] = '" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"><PARAM NAME="FieldDelim" VALUE="|"><PARAM NAME="UseHeader" VALUE=true><PARAM NAME="CaseSensitive" VALUE=false><PARAM NAME="CharSet" VALUE="windows-1251"> <PARAM NAME="DataURL" VALUE="' xobject[2] = '"></OBJECT>' var xtab=new Array() // Таблица xtab[0]='<TABLE WIDTH='+tabwidth+' DATASRC=#' xtab[1]='><TR><TD><SPAN DATAFLD="<html>" DATAFORMATAS="html"></SPAN></TD></TR></TABLE>' var sobj=""; for (i = 0; i < aurl.length; i++) { sobj=sobj+xobject[0]+i+xobject[1]+aurl[i]+xobject[2]+xtab[0]+'idobj'+i+xtab[1]; } document.writeln(sobj);

      Процедура вставки формирует строку, содержащую тэги для объектов ActiveX управления простой текстовой базой данных (см. STD) и тэги таблиц для показа содержимого HTML-документов. Затем эта строка дописывается к текущему документу и выполняется. В результате на вашей странице появляются документы из заданного списка HTML-файлов.
     Таким образом, мы рассматриваем вставляемые HTML-документы как текстовые базы данных. Точнее, в нашем примере мы считаем, что это одностолбцовые таблицы. Если вы не совсем понимаете, о чем идет речь, то обратитесь к примеру "Простые базы данных (STD)", описанному на этом сайте.
     Однако следует иметь в виду следующие ограничения:
   1. Каждый вставляемый HTML-файл в первой своей строке должен иметь идентификатор < html>. У нас он выполняет роль имени столбца БД. В принципе он может быть и другим, но приведенная процедура вставок настроена именно на него. Более того, предполагается, что он записан строчными буквами. Если в ваших HTML-документах используются прописные буквы для этого тэга, то в скрипте, формирующем таблицу, внесите соответствующие изменения. Вот, где надо изменить:
xtab[1]='>< TR>< TD>< SPAN DATAFLD="< html>" DATAFORMATAS="html"> < /SPAN> < /TD> < /TR> < /TABLE>'
   2. Во включаемых HTML-документах каждая строка в браузере интерпретируется отдельно. Конец строки - перевод каретки. Смотрите, чтобы не потерять тэги.
   3. Вставляемые HTML-файлы не должны содержать тэгов < script>.
   4. Не используйте одинарные кавычки.
   5. Может быть, есть и другие ограничения, но пока я их не обнаружил.

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

В нашем примере вставляемые HTML-файлы имеют следующее содержание:
html1.htm
<html> <H3>Документ 1</H3> <image src="open1.gif">это - просто картинка <a href="db0.htm">Описание баз данных в текстовых файлах</a> <button onclick="alert('Привет!!!')">Щелкни</button>"Это - кнопка </html>

html2.htm
<html> <H3>Документ 2</H3> <I>Это - содержание документа из второго файла.<br>В нем только этот текст</I> </html>

Ниже показано, как это все работает:

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