IMHO.WS

IMHO.WS (http://www.imho.ws/index.php)
-   Веб-программирование (http://www.imho.ws/forumdisplay.php?f=29)
-   -   Внедрение фрагмента Html (http://www.imho.ws/showthread.php?t=47360)

Bespalov Roman 31.12.2003 01:00

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

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

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

hempsmoke 31.12.2003 01:43

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

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

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

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 не успевает загружаться.

Bespalov Roman 06.01.2004 13:00

Saruman
Цитата:

ты все это пытаешься сделать только ради того, чтобы меню вставлять на всех страницах из одного файла?
Да.

Цитата:

PS: а без события onload не работает потому, что iframe не успевает загружаться.
Вопрос-то не в том, это я уже сообразил. В чем разница между двумя скриптами, ведь делать они пытаются одно и то же.

Saruman 06.01.2004 23:01

Bespalov Roman
А смысл в таких мрачных извращениях вообще? Как я понимаю, меню у тебя будет статическое. Почему бы его не генерить простым набором document.write, которые будут лежать в одном файле, включающемся на всех страницах?
Или я что-то не так понимаю?

Bespalov Roman 07.01.2004 00:01

Saruman
Для горизонтального меню я уже так сделал. Но там, чтобы создать текстовую переменную, приходится после каждой строки ставить "\" и строк там бывает довольно много.

У меня еще есть вертикальная менюшка и я решил делать "извращения". Они совсем не были бы такими мрачными - скриптик-то совсем набольшой, но написание скриптов на JavaScript чаще всего приносит только одну головную боль.

Я еще написал одному товарищу, который распинался на счет W3C DOM, узлов и соответствующих методах. Если из всего этого ничего путного не выйдет, то придется остановиться на том способе решения.

Saruman 07.01.2004 00:05

Bespalov Roman
А что, хостинг ни ssi, ни php не дает? Или принципиально не хочешь использовать?

Bespalov Roman 07.01.2004 19:13

Ладно, я уже все переделал на document.write(..., весь день провозился. Больше революций не будет.

Izzyy 14.02.2004 19:25

Меня эта тема тоже очень, волновала, все не мог придумать как и что делать вот совсем недавно наткнулся на вот такое решение: http://exper.ural.ru/0051.phtml
может кому пригодиться имхо полезная вещь.

Bespalov Roman 15.02.2004 02:06

Я сначала как правильный юзер пытался использовать W3C DOM, но золотое правило говорит: "чем проще - тем надежнее"!

Теперь я делаю скажем менюшку в отдельном файле html и проверяю ее на работоспособность, а потом, с помощью бесхитростной утилитки, из этого html делается файл с document.write(...). Естественно, этот JScript вставляется в нужный файл с помощью известного тега <script>.

Это будет работать на всех браузерах пока жив Интернет.

RaZEr 15.02.2004 15:23

Цитата:

но золотое правило говорит: "чем проще - тем надежнее"!
Да, и проще в таком случае захоститься там где есть SSI/CGI.

Bespalov Roman 15.02.2004 19:59

Но если используешь бесплатный хостинг, это будет явно дороже :) ...

RaZEr 15.02.2004 20:20

Да и на бесплатных дают и SSI и PHP.

CEO 16.02.2004 11:23

Bespalov Roman, Izzyy :
Тема изначально была интересна только теоретически, "что можно сделать средствами JS?" А на практике самое простое решение это коечно же SSI.
RaZEr
Цитата:

Да и на бесплатных дают и SSI и PHP.
Последним таким хостингом(CGI+SSI) для меня был Fatal.ru, да и тот в скором времени стал не лучше narod.ru хоть и с PHP и c SSI.
Бесплатный без CGI, но с SSI, с хорошой скоростью -- by.ru.


Часовой пояс GMT +4, время: 10:53.

Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.