Внедрение фрагмента Html - Веб-программирование

Bespalov Roman · 31.12.2003, 01:00

Этим зимним вечером, я, наивный чукотский мальчик, сидел и думал: "А как же мне написать кусок HTML в отдельный файл и внедрять его потом куда вздумается?". И почему это с самого начала не предусмотрено?

Можно ли используя только JScript вставлять вот так кусок таблицы и как бы это сделать попрактичнее без document.write в каждой строке?

P.S. То что было в середине декабря я уже читал.

hempsmoke · 31.12.2003, 01:43

Добавлено через 7 минут:

Цитата:

hempsmoke:
P.S. То что было в середине декабря я уже читал

а что было в середине декабря?

RaZEr · 31.12.2003, 01:54

Цитата:

а что было в середине декабря?

http://www.imho.ws/showthread.php?s=&threadid=34797

dr-evil · 31.12.2003, 10:30

Bespalov Roman
почитай про SSI

Bespalov Roman · 31.12.2003, 12:29

А если SSI не поддерживается, кто-то придумал что-нибудь приличное?

Saruman · 31.12.2003, 13:41

Bespalov Roman
PHP 8)
Или пишешь на JavaScript функцию, выводящую таблицу, выносишь ее в отдельный файл, потом на всех страницах подключаешь этот файл и вызываешь ее в нужном месте.

CEO · 31.12.2003, 17:51

Bespalov Roman :Я думаю, можно загрузить файл с фрагментами в невидимый фрейм, а оттдуа успользуя JS вставлять их куда нреобходимо по документу.
Про невидимый фрейм можно глянуть здесь:
http://www.imho.ws/showthread.php?s=&threadid=45815
Вставлять фрагменты html можно, наверна так:
<div id="my">
</div>
document.all.my.outerHTML="строка с html кодом"

Bespalov Roman · 31.12.2003, 22:03

Я уже отладил загрузку через функцию, мне удалось грузить несколько строк HTML в текстовую переменную без особого ущерба для кода. Потом я их вставляю через document.write();. Это я делаю с несколькими столбцами таблицы, которые повторяются на каждой странице сайта.

Попробую еще через невидимый фрейм...

А как его зацепить-то из фрейма?
Через document.all.ifr.outerHTML вставляется вместе с фреймом...

CEO · 31.12.2003, 22:12

Bespalov Roman :На невидимым фреймом поработать интереснее, т.к. в него можно помещать что угодно, а в предыдущем варианте, приходится писать в подгружаемом файле что-то типа var mytext="...". Если получится с фреймом, расскажи подробнее, мне это тоже интересно.

Bespalov Roman · 31.12.2003, 22:51

А блин, ты еще сам не пробовал (см. предыдущее сообщение)!?!

Ну ладно, до завтра, сегодня уже нет желания ломать голову.

CEO · 03.01.2004, 23:05

Bespalov Roman
Вот пример, если еще надо. Я тут глянул, не намного удобнее чам при помощи подключаемого JS,
кроме того OuterHTML вроде не всеми браузерами поддерживается...

---------
main.htm
---------
<html>
<iframe src="1.htm" name="myframe">
</iframe>
<body>
<div id="mydiv">
</div>
<script>
document.all.mydiv.innerHTML=parent.myframe.document.all["b1"].outerHTML;
</body>
</html>

---------
1.htm
---------
<h1 id="b2">Заголовок</h1>
<button id=b1>Кнопка</button>
---------

Bespalov Roman · 03.01.2004, 23:38

Это работает? А то я пробовал ID вставить в <iframe ...> - печатался весь фрейм.

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

Я так понимаю, что кусок html нужно заключить в
<span ID="...">
...
</span>,
а потом вставлять все целиком.

И вопрос второй - outerHTML действительно не поддерживается NN, может еще что-то можно придумать? Например если взять getElementById(), то его наверное можно потом напечатать?

RaZEr · 03.01.2004, 23:41

Насколько я помню innerHTML и outerHTML не являются DOM стандартом, а значит поддерживаются только IE.

CEO · 03.01.2004, 23:47

Bespalov Roman

Цитата:

Это работает?

Да, у меня на IE5 работает.

Цитата:

Я так понимаю, что кусок html нужно заключить в
<span ID="...">
...
</span>.

А зачем, если не секрет? В моем примере файл 1.html содержит только необходимое и все работает, строк может быть сколько угодно и каких угодно

Цитата:

Например если взять getElementById(),

К сожалению я не знаю getElementById, может так?
document.getElementById("myframe")

Добавлено через 1 минуту:
RaZEr InnerHtml вроде поддерживается еще NN6, а outerHTML кроме IE ничем.

Добавлено через 1 минуту:
RaZEr :Кстати, я и о являются DOM стандарте в первый раз слышу

Bespalov Roman · 04.01.2004, 00:29

CEO

Ты точно это проверял? У меня
parent.myframe.document.all["b1"].outerHTML
- null или не является объектом.

hempsmoke · 04.01.2004, 00:40

Цитата:

CEO:
Насколько я помню innerHTML и outerHTML не являются DOM стандартом, а значит поддерживаются только IE

так точно!

CEO · 04.01.2004, 03:37

Цитата:

Ты точно это проверял? У меня
parent.myframe.document.all["b1"].outerHTML
- null или не является объектом.

Да, учиться мне еще учиться и учиться... Что не сделаю все глюкает.
Хотя у меня работало, странно. Ну если разберешься и мне расскажи, т.к. интересно.

Кстати, то что я написал -- отредактированный вариант, только что прверил -- действительно не работает. Но когда я отлаживал было так:
<html>
<iframe src="1.htm" name="myframe">
</iframe>
<body>
<div id="mydiv">
</div>
<script>
msg=""
for (i=0; i<document.all.length; i++)
{
msg+=i+" "+document.getElementById("myframe").all[i]+"\n"
}
alert(msg)
alert(parent.myframe.document.all[0].outerHTML)
document.all.mydiv.innerHTML=parent.myframe.document.all["b1"].outerHTML;
</script>
</body>
</html>
Татк все точно работает, а когда убираю
alert(msg)
alert(parent.myframe.document.all[0].outerHTML) -- перестает работать. Почему бы это?

Все, кажись разобрался, хотя и без всякого понятия почему так::
<html>
<iframe src="1.htm" name="myframe">
</iframe>
<body>
<div id="mydiv">
</div>
<script>
function window.onload()
{
document.all.mydiv.innerHTML=parent.myframe.document.all["b1"].outerHTML;
}
</script>
</body>
</html>
Так только что проверил -- работает.

Bespalov Roman · 04.01.2004, 14:28

Короче это штука реальная, только делается она через узлы (Nodes), тогда все поддерживается W3C DOM. Принцип следующий: сканируется структура узлов (тегов) в источнике, причем совершенно не обязательно имеющих id, потом создается такая же структура в получателе и передается содержимое тегов.

Это нужная вещь и я не понимаю, почему она до сих пор не реализована для всех броузеров. Можно было бы outerHTML поддержать и тогда бы не пришлось городить огород.

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

Короче, вот недоделанный скрипт, в котором пока не реализован принцип, о котором я сказал выше:

<script>
function window.onload() {
var i=3
while (parent.myframe.document.all[i]!=null) {
var oldItem = parent.myframe.document.all[i];
var newItem = document.createElement(oldItem.tagName)
if (oldItem.lastChild.nodeValue!=null) {
newItem.appendChild(document.createTextNode(oldItem.lastChild.nodeValu e))
} else {
newItem.appendChild(document.createTextNode(""))
}
var lastChild = document.getElementById("mydiv[i]")
document.getElementById("mydiv").appendChild(newItem, lastChild)
i++
}
}
</script>

У кого будут мысли - пишите.

Bespalov Roman · 05.01.2004, 23:45

Честно говоря я уже заколебался решать эту задачу через W3C DOM. Не понимаю, почему скрипт:

<html>
<body>
<div id="mytag"><a href="2.htm">Ссылка</a></div>
<div id="mynod"><div id="mydiv"></div></div>
<script>
var oldItem = document.all["mytag"];
var newItem = document.all["mydiv"];
newItem=oldItem.cloneNode(true);
document.all["mynod"].appendChild(newItem);
</script>
</body>
</html>

запросто выполняется. А другой скрипт:

<html>
<body>
<iframe src="3.htm" name="myframe"></iframe>
<div id="mynod"><div id="mydiv"></div></div>
<script>
function window.onload() {
var oldItem = window.myframe.document.all["mytag"];
var newItem = document.all["mydiv"];
newItem=oldItem.cloneNode(true);
// document.all["mynod"].appendChild(newItem);
}
</script>
</body>
</html>

--------
3.htm
--------
<div id="mytag"><p><a href="2.htm">Ссылка</a></p></div>
--------

не выполняется без события window.onload(), а потом спотыкается на закавыченной строке.

Может у кого-то версия с фреймом заработает?

Про другой, более сложный путь я уже и не говорю. Там мне удается воссоздать полностью все дерево тегов, но они получаются без аттрибутов, а скопировать их не представляется возможным за отсутствием приличных методов. Чем думали разработчики W3C DOM я не могу понять?

Saruman · 06.01.2004, 00:06

Bespalov Roman
ты все это пытаешься сделать только ради того, чтобы меню вставлять на всех страницах из одного файла?
PS: а без события onload не работает потому, что iframe не успевает загружаться.

31.12.2003, 01:00	# 1
Bespalov Roman Junior Member Регистрация: 08.07.2002 Адрес: г.Белёв, Тульская обл. Сообщения: 182	Внедрение фрагмента Html Этим зимним вечером, я, наивный чукотский мальчик, сидел и думал: "А как же мне написать кусок HTML в отдельный файл и внедрять его потом куда вздумается?". И почему это с самого начала не предусмотрено? Можно ли используя только JScript вставлять вот так кусок таблицы и как бы это сделать попрактичнее без document.write в каждой строке? P.S. То что было в середине декабря я уже читал. __________________ Беспалов Роман Последний раз редактировалось Bespalov Roman; 31.12.2003 в 01:10.

31.12.2003, 10:30	# 4
dr-evil ::VIP:: Регистрация: 17.02.2002 Адрес: /home/dr-evil Пол: Male Сообщения: 2 212	Bespalov Roman почитай про SSI __________________ Сеть - это диагноз... а сисадмин - состояние души. Питер! Все на сходку!!! \| Обзоры порталов. Добавь свою любимую систему!

31.12.2003, 12:29	# 5
Bespalov Roman Junior Member Регистрация: 08.07.2002 Адрес: г.Белёв, Тульская обл. Сообщения: 182	А если SSI не поддерживается, кто-то придумал что-нибудь приличное? __________________ Беспалов Роман

31.12.2003, 13:41	# 6
Saruman ::VIP:: Регистрация: 12.11.2002 Адрес: Nicosia, Cyprus Сообщения: 1 285	Bespalov Roman PHP 8) Или пишешь на JavaScript функцию, выводящую таблицу, выносишь ее в отдельный файл, потом на всех страницах подключаешь этот файл и вызываешь ее в нужном месте. __________________ "If people only knew how hard I work to gain my mastery, it wouldn't seem so wonderful at all." Michelangelo Buonarroti

31.12.2003, 17:51	# 7
CEO Full Member Регистрация: 31.08.2003 Адрес: где-то между Марсом и Юпитером Сообщения: 998	Bespalov Roman :Я думаю, можно загрузить файл с фрагментами в невидимый фрейм, а оттдуа успользуя JS вставлять их куда нреобходимо по документу. Про невидимый фрейм можно глянуть здесь: http://www.imho.ws/showthread.php?s=&threadid=45815 Вставлять фрагменты html можно, наверна так: <div id="my"> </div> document.all.my.outerHTML="строка с html кодом" __________________ Старые игры раздают здесь

31.12.2003, 22:03	# 8
Bespalov Roman Junior Member Регистрация: 08.07.2002 Адрес: г.Белёв, Тульская обл. Сообщения: 182	Я уже отладил загрузку через функцию, мне удалось грузить несколько строк HTML в текстовую переменную без особого ущерба для кода. Потом я их вставляю через document.write();. Это я делаю с несколькими столбцами таблицы, которые повторяются на каждой странице сайта. Попробую еще через невидимый фрейм... А как его зацепить-то из фрейма? Через document.all.ifr.outerHTML вставляется вместе с фреймом... __________________ Беспалов Роман Последний раз редактировалось Bespalov Roman; 31.12.2003 в 22:48.

31.12.2003, 22:12	# 9
CEO Full Member Регистрация: 31.08.2003 Адрес: где-то между Марсом и Юпитером Сообщения: 998	Bespalov Roman :На невидимым фреймом поработать интереснее, т.к. в него можно помещать что угодно, а в предыдущем варианте, приходится писать в подгружаемом файле что-то типа var mytext="...". Если получится с фреймом, расскажи подробнее, мне это тоже интересно. __________________ Старые игры раздают здесь

31.12.2003, 22:51	# 10
Bespalov Roman Junior Member Регистрация: 08.07.2002 Адрес: г.Белёв, Тульская обл. Сообщения: 182	А блин, ты еще сам не пробовал (см. предыдущее сообщение)!?! Ну ладно, до завтра, сегодня уже нет желания ломать голову. __________________ Беспалов Роман

03.01.2004, 23:05	# 11
CEO Full Member Регистрация: 31.08.2003 Адрес: где-то между Марсом и Юпитером Сообщения: 998	Bespalov Roman Вот пример, если еще надо. Я тут глянул, не намного удобнее чам при помощи подключаемого JS, кроме того OuterHTML вроде не всеми браузерами поддерживается... --------- main.htm --------- <html> <iframe src="1.htm" name="myframe"> </iframe> <body> <div id="mydiv"> </div> <script> document.all.mydiv.innerHTML=parent.myframe.document.all["b1"].outerHTML; </body> </html> --------- 1.htm --------- <h1 id="b2">Заголовок</h1> <button id=b1>Кнопка</button> --------- __________________ Старые игры раздают здесь

03.01.2004, 23:38	# 12
Bespalov Roman Junior Member Регистрация: 08.07.2002 Адрес: г.Белёв, Тульская обл. Сообщения: 182	Это работает? А то я пробовал ID вставить в <iframe ...> - печатался весь фрейм. И конечно меня интересует гораздо больше строк html. В случае со скриптом в конце каждой строки html приходится вставлять \, для того чтобы их переносить, иначе переменной просто ничего не присвоится. Поэтому там с html приходится чудить конкретно. Я так понимаю, что кусок html нужно заключить в <span ID="..."> ... </span>, а потом вставлять все целиком. И вопрос второй - outerHTML действительно не поддерживается NN, может еще что-то можно придумать? Например если взять getElementById(), то его наверное можно потом напечатать? __________________ Беспалов Роман Последний раз редактировалось Bespalov Roman; 03.01.2004 в 23:40.

03.01.2004, 23:41	# 13
RaZEr МОД-Оператор ЭВМ Регистрация: 18.04.2002 Адрес: Питер Сообщения: 4 343	Насколько я помню innerHTML и outerHTML не являются DOM стандартом, а значит поддерживаются только IE.

04.01.2004, 00:29	# 15
Bespalov Roman Junior Member Регистрация: 08.07.2002 Адрес: г.Белёв, Тульская обл. Сообщения: 182	CEO Ты точно это проверял? У меня parent.myframe.document.all["b1"].outerHTML - null или не является объектом. __________________ Беспалов Роман

04.01.2004, 14:28	# 18
Bespalov Roman Junior Member Регистрация: 08.07.2002 Адрес: г.Белёв, Тульская обл. Сообщения: 182	Короче это штука реальная, только делается она через узлы (Nodes), тогда все поддерживается W3C DOM. Принцип следующий: сканируется структура узлов (тегов) в источнике, причем совершенно не обязательно имеющих id, потом создается такая же структура в получателе и передается содержимое тегов. Это нужная вещь и я не понимаю, почему она до сих пор не реализована для всех броузеров. Можно было бы outerHTML поддержать и тогда бы не пришлось городить огород. У меня, например, в каждом разделе сайта есть на страницах подменю, в нем ссылки на все страницы раздела. Когда они добавляются, то приходится править и перезакачивать все страницы раздела, вместо того, чтобы поправить только меню. А еще на всех страницах есть меню разделов, которое случилась необходимость поправить, а страниц несколько десятков, не знаю даже сколько. Короче, вот недоделанный скрипт, в котором пока не реализован принцип, о котором я сказал выше: <script> function window.onload() { var i=3 while (parent.myframe.document.all[i]!=null) { var oldItem = parent.myframe.document.all[i]; var newItem = document.createElement(oldItem.tagName) if (oldItem.lastChild.nodeValue!=null) { newItem.appendChild(document.createTextNode(oldItem.lastChild.nodeValu e)) } else { newItem.appendChild(document.createTextNode("")) } var lastChild = document.getElementById("mydiv[i]") document.getElementById("mydiv").appendChild(newItem, lastChild) i++ } } </script> У кого будут мысли - пишите. __________________ Беспалов Роман

05.01.2004, 23:45	# 19
Bespalov Roman Junior Member Регистрация: 08.07.2002 Адрес: г.Белёв, Тульская обл. Сообщения: 182	Честно говоря я уже заколебался решать эту задачу через W3C DOM. Не понимаю, почему скрипт: <html> <body> <div id="mytag"><a href="2.htm">Ссылка</a></div> <div id="mynod"><div id="mydiv"></div></div> <script> var oldItem = document.all["mytag"]; var newItem = document.all["mydiv"]; newItem=oldItem.cloneNode(true); document.all["mynod"].appendChild(newItem); </script> </body> </html> запросто выполняется. А другой скрипт: <html> <body> <iframe src="3.htm" name="myframe"></iframe> <div id="mynod"><div id="mydiv"></div></div> <script> function window.onload() { var oldItem = window.myframe.document.all["mytag"]; var newItem = document.all["mydiv"]; newItem=oldItem.cloneNode(true); // document.all["mynod"].appendChild(newItem); } </script> </body> </html> -------- 3.htm -------- <div id="mytag"><p><a href="2.htm">Ссылка</a></p></div> -------- не выполняется без события window.onload(), а потом спотыкается на закавыченной строке. Может у кого-то версия с фреймом заработает? Про другой, более сложный путь я уже и не говорю. Там мне удается воссоздать полностью все дерево тегов, но они получаются без аттрибутов, а скопировать их не представляется возможным за отсутствием приличных методов. Чем думали разработчики W3C DOM я не могу понять? __________________ Беспалов Роман

06.01.2004, 00:06	# 20
Saruman ::VIP:: Регистрация: 12.11.2002 Адрес: Nicosia, Cyprus Сообщения: 1 285	Bespalov Roman ты все это пытаешься сделать только ради того, чтобы меню вставлять на всех страницах из одного файла? PS: а без события onload не работает потому, что iframe не успевает загружаться. __________________ "If people only knew how hard I work to gain my mastery, it wouldn't seem so wonderful at all." Michelangelo Buonarroti