0

Леонид Каганов: дневник

<< предыдущая заметкаследующая заметка >>
06 января 2010
вопрос про document.write

Сделал почти openid-авторизацию. Вышла очень красивая штука — раскрывается маленькое окошечко как для правки, в нем все вводишь, и без перезагрузки страницы (если openid — то с мгновенным возвратом на нее же) все срабатывает. Показать пока не могу, потому что не решил факин факин идеологическую проблему — что, черт возьми, делать с теми, кто уже залогинен, а теперь перелогинивается. Но эту идеологию я решу.

Проблема в другом. Выяснилось, что существует куча мелкого кода — javascript, style и т.п., который может понадобиться посетителю раз в жизни — например, если он нажал "залогиниться" и у него стали разворачиваться окна. Зачем это говно внедрять в страницу, если оно понадобится раз в жизни? Не лучше ли его получить аяксом? Чуете, куда я клоню?

Так появилась интересная идея: сделать простую javascript-процедурку, которая бы получала от сервера по яксу инструкции, скрипты, стили, открывала вспомогательные окошечки, проверяла правильность данных, получала снова по аяксу что надо, и все за собой убивала лишнее. Типа, захотелось пользователю отредактировать свои пользовательские данные — ткнул в ссылку, раскрылось внешнее окошечко, поработал, закрыл, и продолжает писать коммент. Другой пример: захотелось админу во время набора поста поискать фоточку в своем фотоальбоме и вставить ее. Ткнул в ссылку, раскрылось окошко, в нем подгрузилось все нужное... И так далее. (К слову, поглядите модельку — так мне мыслится удобная аякс-работа с фотоальбомами: http://lleo.aha.ru/blog/tree/tree.html — реально шарится по существующим на сервере директориям.)

В общем, удивительные раскрываются перспективы. И сделать-то это просто. И, главное, сел вот я и сделал с полпинка. Одна лишь проблема: ну не могу понять, как мне заставить браузер исполнить произвольный текст javascript, как если б он был на странице изначально! Поясню на примере:

Имеется текст скрипта: var scripttext = " alert('Бугагашечки!'); alert('Снова бугагашечки!'); ";
Мы даем команду: document.write('<scr'+'ipt>' + scripttext + '</scri'+'pt>');
И скрипт становится частью страницы и выполняется! Также можно добавить в код страницы новые стили и прочее.

Но это сработает только в случае, если не окончилась загрузка страницы. Если же страница уже целиком готова, а document.write() выполнился от действия пользователя (нажал ссылку), то он сбросит всю страницу. И это не бага, а документированное свойство document.write(). Как быть? Как это побороть?

Как и каким способом на javascript можно сделать так, чтобы добавился и выполнился новый javascript, имеющийся пока в виде голого текста, не сбрасывая при этом страницу? Кто подскажет?

<< предыдущая заметка следующая заметка >>
пожаловаться на эту публикацию администрации портала
архив понравившихся мне ссылок
Оставить комментарий
2010-01-06 09:50
Windows Firefox
whois
0
0
batc0h
Этот человек не загрузил свой юзерпик, и я подобрал ему этот. Человек, пишущий такое, должен именно так выглядеть, верно?
Функция eval() за такое ответственна.
2010-01-10 13:16
whois
0
0
{name}
Этот человек не загрузил свой юзерпик, и я подобрал ему этот. Человек, пишущий такое, должен именно так выглядеть, верно?
Запросто. Просто запихиваете функции в объекты, а потом используете.

myfuncs.func1 = function (param) { ... };
myfuncs.func2 = function () { ... };
myfuncs.func3 = function (param1, param2) { ... };

Или более красиво:

myfuncs = {
func1 : function (param) {
...
}
,
func2 : function () {
...
}
};

Этот текст запихиваем в eval() и потом используем нужные функции, например myfuncs.func1('Бла-бла-бла');
2010-01-11 00:34
whois
0
0
{name}
Этот человек не загрузил свой юзерпик, и я подобрал ему этот. Человек, пишущий такое, должен именно так выглядеть, верно?
Да, именно так. Соль в том, что в eval нельзя загнать объявление глобальной функции, а определение поля/метода объекта — запросто.
2010-01-10 22:41
whois
0
0
Леонит Каганофф
Кажется я начинаю прозревать.

Смотрите:

<script>
var s1='f1=function(p){alert(p)};'
var s2='function f2(p){alert(p)}'
</script>

<p><input type=button onclick='eval(s1);' value='set f1'>
<input type=button onclick='f1(1);' value='f1'>

<p><input type=button onclick='eval(s2);' value='set f2'>
<input type=button onclick='f2(2);' value='f2'>

С f1 все работает. С f2 - не работает. Почему? Мне непонятна логика JS. Осталось понять, во всех ли браузерах работает f1. Если да - то это сильно упрощает дело, и моя громоздкая система по загрузке скриптов через жопу становится ненужной.
2010-01-11 00:36
whois
0
0
{name}
Этот человек не загрузил свой юзерпик, и я подобрал ему этот. Человек, пишущий такое, должен именно так выглядеть, верно?
Выше написал, почему так. И так работает во всех браузерах.
2010-01-11 01:33
whois
0
0
Леонит Каганофф
А можно заодно еще вопрос?

Могу я средствами JS установить для DIV параметр zindex? Смысл в том, что я отныне и в будущем не хочу ограничивать движок в количестве раскрываемых окон. Мало ли, захочется одновременно писать три комментария, вызывая дополнительные панели и получая сообщения... Но хочется, чтобы каждое окошко было на экране чуть выше предыдущего.

И еще вопрос: не подскажете ли универсальную функцию для перетаскивания окошка (DIV) по экрану? Понятно, что надо обработчик мыши повесить по некой области и нажатой кнопке, но как имено это лучше сделать...
2010-01-11 03:33
whois
0
0
{name}
Этот человек не загрузил свой юзерпик, и я подобрал ему этот. Человек, пишущий такое, должен именно так выглядеть, верно?
1. Да, конечно. document.getElementById('mydiv').style.zIndex = '100';

2. Вот простенький примерчик:

<style> div#dragme { position:absolute; width:300; height:300; background-color:red; cursor:move; user-select:none; -moz-user-select:none; -khtml-user-select:none; } </style>
<script>
var _moving=false, _x=0, _y=0;
function startMove(e)
{
if(!e) e = window.event; // IE fix
_moving=true;
_x = e.offsetX ? e.offsetX : e.layerX;
_y = e.offsetY ? e.offsetY : e.layerY;
}
function stopMove() { _moving=false; }
function doMove(e,d)
{
if(!e) e = window.event; // IE fix
if(_moving) { d.style.left=e.clientX-_x; d.style.top=e.clientY-_y; }
}
</script>

<div id="dragme" unselectable="on" onmousedown="startMove(event)" onmouseup="stopMove()" onmousemove="doMove(event,this)"></div>
2010-01-11 04:48
whois
0
0
Леонит Каганофф
Спасибо огромнейшее!!! Теперь можно грабить корованнны!

PS: Вопросик последний: а вот у меня такая магическая комбинация встроена в страницу:

// координаты мыши
var mouse_x=mouse_y=0;

document.onmousemove = function(e){ if(!e) e=window.event;
if(e.pageX || e.pageY) { mouse_x=e.pageX; mouse_y=e.pageY; }
else if (e.clientX || e.clientY) {
mouse_x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
mouse_y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
};

Правильно ли я понимаю, что:

1. Координаты мыши можно, не парясь, брать оттуда готовые?

2. Или кошернее не мучать мышь глобальной обработкой мыши, а всякий раз брать event по щелчку, как у вас?

3. Правильно ли мне кажется, что конструкция _e.offsetX?e.offsetX:e.layerX менее кроссбраузерна, чем та, что у меня сейчас? Ибо она менее наворочена, что странно.
2010-01-11 04:50
whois
0
0
Леонит Каганофф
Ой, layerX еще какой-то... "понапридумывали блять говна Сталина на них нет"(с)Арканоид
2010-01-11 00:47
whois
0
0
{name}
Этот человек не загрузил свой юзерпик, и я подобрал ему этот. Человек, пишущий такое, должен именно так выглядеть, верно?
В первый вариант вкралась небольшая неточность.
Сначала надо определить саму переменную myfuncs, а потом определять её свойства:

myfuncs = {};
myfuncs.func1 = ...
2010-01-13 00:17
whois
0
0
hkm
Этот человек не загрузил свой юзерпик, и я подобрал ему этот. Человек, пишущий такое, должен именно так выглядеть, верно?
функция eval("alert('bugaga')")?
document.write видимо только через innertext/innerhtml/DOM можно эмулировать.

всего комментариев: 30

<< предыдущая заметка следующая заметка >>