Форум программистов «Весельчак У»
  *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

  • Рекомендуем проверить настройки временной зоны в вашем профиле (страница "Внешний вид форума", пункт "Часовой пояс:").
  • У нас больше нет рассылок. Если вам приходят письма от наших бывших рассылок mail.ru и subscribe.ru, то знайте, что это не мы рассылаем.
   Начало  
Наши сайты
Помощь Поиск Календарь Почта Войти Регистрация  
 
Страниц: [1]   Вниз
  Печать  
Автор Тема: Клиентский вариант "полезных скриптов"  (Прочитано 38501 раз)
0 Пользователей и 1 Гость смотрят эту тему.
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« : 10-05-2005 20:55 » 

Думаю, что такая тема то же будет полезна.

Основная цель: чтобы часть головной боли тех, кто роет горы док для поиска простейших (с точки зрения человека) вещей, не пропали зря и помогли другим. В клиентской части проблем не меньше, чем в серверной, а несовместимостей на много больше.

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

Вот первый вклад:

Javascript
Требовалось получить данные о цветовых настройках документа для передачи аплету. Вся найденая мной документация ссылалась на класс Style, экземпляры которого есть в каждом теге документа. Проверка показала, что все свойства этого класса write-only. Причем и в IE и в Mozilla.
Код:
function get_body_background_color()
{
var body = document.getElementById('body');
// Это исскуственное условие - атрибут ID="body" в теге BODY
// Мне лень было разбирать все досконально, учитывая то, что при выходе следующей версии какого-либо из браузеров
//   доступ по модели document.tags.BODY может не работать. Кстати, Mozilla сообщает, что такого свойства у tags нет.

if ( navigator.appName == "Microsoft Internet Explorer" )
{
color_bg = body.currentStyle.backgroundColor;
}
else // Mozilla
{
color_bg = body.bgColor;
}
}
Тестировал на IE 6.0.2900.2180.xpsp_sp2_.... и Mozilla 1.7.5.
« Последнее редактирование: 14-12-2007 14:54 от Алексей1153++ » Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #1 : 17-07-2005 22:09 » new

Опять же, для тех, кому интересно...


Эх, наболело - не могу молчать: п№%;№% создатели javascript, а еще большие п№%;№% - те, кто, продолжая начатое, неудосужился сделать толковый базовый инструментарий. В результате - полный бардак: несовместимость реализации и жиденькие возможности. Правда все-таки с js возможностей больше, чем без.


Сегодня я хочу рассказать о возможности динамической подгрузки страниц и их частей.

Самый распространенный способ - использование фреймов - FRAMESET+FRAME и IFRAME. Достоинства и недостатки неоднократно обсуждались в интернете - в том числе и на нашем форуме. На мой взгляд главный недостаток - необходимость определять размер фрейма. Это затрудняет встраивание в страницу, особенно с динамически создаваемым содержимым.

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

Экспериментируя, я досыта намучился с IFRAME, OBJECT и прочими штатными вариантами подгрузки одной страницы к другой. Получалось криво. Я обычно тестирую на Mozilla, а когда начинает получаться тестирую еще и на IE. Поведение обоих браузеров сильно отличается - порой не возможно получить сносного результата на обеих. Намучился, но вынес из этого немного полезного.

И так, используя фреймы (я использую IFRAME) можно загрузить страницу, но добиться требуемого внешнего вида сложно или невозможно. Требуемый вид - вставить эту страницу в блочный или линейный элемент. Благодаря CSS фрейм можно включить в страницу и не отображать (стиль display: none). Загрузить страницу во фрейм можно разными методами: ссылкой и формой с параметром TARGET, указывающим на нужный фрейм. Об этом сейчас не говорю. Остается только задача копирования данных из фрейма в нужный элемент...

На этом этапе то же есть подводные камни. Прежде всего, нужно дождаться загрузки страницы: если попытаться скопировать содержимое фрейма сразу после инициирования загрузки, то, быстрее всего, там вообще ничего не будет. Кроме того, Mozilla заявляет, что у IFRAME с уже загруженным документом нет свойства document. В общем, все очень странно.

Легче всего обратиться к загруженной странице из ней же самой: вставить скрипт, который по событию ONLOAD, либо просто распложенный в конце страницы и автоматически исполняющийся после загрузки. Его задача - найти кусок текста, преднозначенного для копирования и передать его в родительскую страницу. Опять же, чтобы не морочится с поиском места назначения в родительской странице (тем более если оно известно только ей), можно вызвать ф-ию из родительского документа: window.parent.функция(параметры).

Вот пример:
Файл main.html
Код:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1251" />
<STYLE>
IFRAME { display: none; }
</STYLE>
<SCRIPT TYPE="text/javascript">
var docs = new Array();

function loaded( obj, id )
{
with ( docs[id] )
{
src = obj;
a.href = 'javascript:void(0);';
}
show('', id);
}

function show( obj, id )
{
if ( docs[id] != null && docs[id].src != null )
{
var view = document.getElementById('view');
if ( view != null ) view.innerHTML = docs[id].src.innerHTML;
}
else if ( typeof(obj) == 'object' )
{
obj.href = 'file' + id + '.html';
obj.target = 'doc' + id;
docs[id] = { a: obj, src: null };
}
}

function unload( obj, id )
{
if ( docs[id] != null && docs[id].src != null )
{
var file = document.getElementById('file' + id);
file.innerHTML = '<IFRAME NAME="doc' + id + '"></IFRAME>';
docs[id].src = null;
}
}
</SCRIPT>
</HEAD>
<BODY>

<A HREF="javascript:void(0);" ONCLICK="show(this,'1');">load file 1</A>&nbsp;
<A HREF="javascript:void(0);" ONCLICK="show(this,'2');">load file 2</A><BR />
<A HREF="javascript:void(0);" ONCLICK="unload(this,'1');">unload file 1</A>&nbsp;
<A HREF="javascript:void(0);" ONCLICK="unload(this,'2');">unload file 2</A><BR />

<HR />

<DIV ID="view"></DIV>

<HR />

<SPAN ID="file1"><IFRAME NAME="doc1"></IFRAME></SPAN>
<SPAN ID="file2"><IFRAME NAME="doc2"></IFRAME></SPAN>

</BODY>
</HTML>
Файл file1.html
Код:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1251"/>
</HEAD>
<BODY>

<SPAN ID="doc">
Тестовый файл 1 (windows-1251)
</SPAN>

<SCRIPT TYPE="text/javascript">
o = document.getElementById('doc');
if ( o != null )
{
window.parent.loaded(o, '1');
}
</SCRIPT>

</BODY>
</HTML>
Файл file1.html
Код:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=utf-8"/>
</HEAD>
<BODY>

<SPAN ID="doc">
Тестовый файл 2 (utf-8)
</SPAN>

<SCRIPT TYPE="text/javascript">
o = document.getElementById('doc');
if ( o != null )
{
window.parent.loaded(o, '2');
}
</SCRIPT>

</BODY>
</HTML>

Много сил потратил на копирование блока текста и не удовлетворился результатом. Признаюсь, хоть и не люблю пользоваться чужими мозгами, заглянул в код rsdn.ru. Конечно, я не копировал их код, а переписал заново.

Пояснение к main.html: названия ссылок говорят сами за себя - загрузка и выгрузка файлов в скрытых фреймах. Нагляднее этот процесс будет, если закоментировать или удалить строку IFRAME { display: none; }.

Заметьте, что файлы file1.html и file2.html у меня в разной кодировке, но не здесь - на форуме весь текст в одной кодировке.
Это, кстати, замечательное свойство - можно одновременно загружать документы в разных кодировках и их отображение согласуется браузером.

Тестировал на IE 6.0.2900.2180.xpsp_sp2_.... и Mozilla 1.7.8.

Совственно, это только малая часть того, что мне нужно - остальное буду рассказывать по мере понимания.
« Последнее редактирование: 14-12-2007 14:55 от Алексей1153++ » Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #2 : 12-02-2006 14:05 » 

Продолжаю серию.

Сегодня решаю такой вопрос: как на какое-то время заблокировать доступ к странице?
Т.е. аналог модальных окон: основное блокируется, а новое поверх всего.
Можно использовать для контроля над страницей на время выполнения синхронного запроса, или просто для эффекта.

Решил я задачку двумя способами: сначала тупо, а потом элементарно.

1) Попытка заблокировать все формы и ссылки в документе (не касался случаев с фреймами и возможные обработчики на других элементах).
Код: (HTML)
<html>
<head>

<title>Page dis/enl test</title>
<meta http-equiv="Content-type" content="text/html; charset=windows-1251" />

<style>
body {
        margin: 0;
        padding: 0;
        background-color: grey;
        font-family: sans-serif;
}
#banner {
        position: absolute;
        z-index: 1000;
        margin: 0;
        display: none;
        background-color: gold;
        top: 100px;
        left: 100px;
}
#text {
        border: 1px solid black;
        padding: 4px;
        margin: 2px;
        background-color: lightgreen;
        font-weight: bold;
}
</style>

</head>
<body>

<div id="banner">
This is popup banner!
</div>

<pre id="text">
<a href="http://ya.ru/">short yandex</a>
</pre>

<script type="text/javascript">

/* controlls */

var out = {
    text: document.getElementById('text'),
    banner: document.getElementById('banner')
    };

/* page's controls disable/enable */

var page = {
        links_state: [],
        forms_state: [],
        disable: null,
        enable: null
        };


page.disable = function ()
{
        var i;
        for (i = 0; i < document.links.length; i++)
        {
                this.links_state.push({
                        ref: document.links[i],
                        href: document.links[i].href,
                        onclick: document.links[i].onclick
                        });
                document.links[i].href = 'javascript:void(1)';
                document.links[i].onclick = 'return false;';
        }
        for (i = 0; i < document.forms.length; i++)
        {
                var frm = {
                        ref: document.forms[i],
                        childs: []
                        }
                var c;
                var form = document.forms[i];
                for (c = 0; c < form.childNodes.length; c++)
                {
                        if (form.childNodes[c].nodeType != 1) continue;
                        if (
                                form.childNodes[c].nodeName != 'INPUT' &&
                                form.childNodes[c].nodeName != 'BUTTON' &&
                                form.childNodes[c].nodeName != 'TEXTAREA' &&
                                form.childNodes[c].nodeName != 'SELECT'
                                ) continue;
                        frm.childs.push({
                                ref: form.childNodes[c],
                                disabled: form.childNodes[c].disabled
                                });
                        form.childNodes[c].disabled = '1';
                }
                this.forms_state.push(frm);
        }
};

page.enable = function ()
{
        var i;
        for (i = 0; i < this.links_state.length; i++)
        {
                this.links_state[i].ref.href = this.links_state[i].href;
                this.links_state[i].ref.onclick = this.links_state[i].onclick;
        }
        this.links_state = [];
        for (i = 0; i < this.forms_state.length; i++)
        {
                var c;
                var form = this.forms_state[i];
                for (c = 0; c < form.childs.length; c++)
                {
                        form.childs[c].ref.disabled = form.childs[c].disabled;
                }
        }
        this.forms_state = [];
};

/* test */

function do_send(form)
{
        page.disable();
        out.banner.style.display = 'block';
        setTimeout('out.banner.style.display = "none";page.enable();', 5000);
}

</script>

<br />

<form onsubmit="do_send(this);return false;" action="javascript:void(0)">
        <input type="text" name="request" />
        <b>всяки мусор</b>
        <button type="submit">send</button>
</form>

</body>
</html>

2) Просто создание элемента размером со страницу и находящегося выше элементов страницы. Для большего эффекта применил прозрачность.
Код: (HTML)
<html>
<head>

<title>Page dis/enl test</title>
<meta http-equiv="Content-type" content="text/html; charset=windows-1251" />

<style>
body {
        margin: 0;
        padding: 0;
        background-color: grey;
        font-family: sans-serif;
}
#banner {
        position: absolute;
        z-index: 1000;
        margin: 0;
        display: none;
        background-color: gold;
        top: 100px;
        left: 100px;
}
#glass {
        position: absolute;
        z-index: 999;
        margin: 0;
        display: none;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=0.5);
        opacity: 0.5;
}
#text {
        border: 1px solid black;
        padding: 4px;
        margin: 2px;
        background-color: lightgreen;
        font-weight: bold;
}
</style>

</head>
<body>

<div id="glass"></div>

<div id="banner">
This is popup banner!
</div>

<pre id="text">
<a href="http://ya.ru/">short yandex</a>
</pre>

<script type="text/javascript">

/* controlls */

var out = {
    text: document.getElementById('text'),
    banner: document.getElementById('banner'),
    glass: document.getElementById('glass')
    };

/* test */

function do_send(form)
{
        out.glass.style.display = 'block';
        out.banner.style.display = 'block';
        setTimeout('out.banner.style.display = "none";out.glass.style.display = "none";', 5000);
}

</script>

<br />

<form onsubmit="do_send(this);return false;" action="javascript:void(0)">
        <input type="text" name="request" />
        <b>всяки мусор</b>
        <button type="submit">send</button>
</form>

</body>
</html>

В обоих примерах страница блокируется на 5 секунд (см. on_send()), в течении которых не должна срабатывать ни одна ссылка и быть недоступным ни один элемент формы.

Оба примера протестированы на Mozilla 1.7.12 и IE6.0.2900....xpsp_sp2
« Последнее редактирование: 14-12-2007 14:55 от Алексей1153++ » Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #3 : 12-02-2006 15:52 » 

Во втором варианте есть маленькая ошибочка. Вот исправленный код:
Код: (HTML)
<html>
<head>

<title>Page dis/enl test</title>
<meta http-equiv="Content-type" content="text/html; charset=windows-1251" />

<style>
body {
        margin: 0;
        padding: 0;
        background-color: gray;
        font-family: sans-serif;
}
#banner {
        position: absolute;
        z-index: 1000;
        margin: 0;
        padding: 2em;
        display: none;
        font-weight: bold;
        background-color: gold;
}
#glass {
        position: absolute;
        z-index: 999;
        margin: 0;
        display: none;
        top: 0;
        left: 0;
        background-color: black;
        filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=0.5);
        opacity: 0.5;
}
#text {
        border: 1px solid black;
        padding: 4px;
        margin: 2px;
        background-color: lightgreen;
        font-weight: bold;
}
</style>

</head>
<body id="body">

<div id="glass"></div>

<div id="banner"><div>
This is popup banner!
</div></div>

<pre id="text">
<a href="http://ya.ru/">short yandex</a>
</pre>

<script type="text/javascript">

/* controlls */

var out = {
        text: document.getElementById('text'),
        banner: document.getElementById('banner'),
        glass: document.getElementById('glass'),
        body: document.getElementById('body')
    };

/* test */

function do_send(form)
{
        with(out.glass.style)
        {
                display = 'block';
        width = out.body.scrollWidth > out.body.clientWidth ? out.body.scrollWidth : out.body.clientWidth;
        height = out.body.scrollHeight > out.body.clientHeight ? out.body.scrollHeight : out.body.clientHeight;
        }
        with(out.banner.style)
        {
                display = 'block';
                top = (out.body.scrollTop + (out.body.clientHeight - out.banner.offsetHeight)/2) + 'px';
                left = (out.body.scrollLeft + (out.body.clientWidth - out.banner.offsetWidth)/2) + 'px';
        }
        setTimeout('out.banner.style.display = "none";out.glass.style.display = "none";', 5000);
}

</script>

<br />

<form onsubmit="do_send(this);return false;" action="javascript:void(0)">
        <input type="text" name="request" />
        <button type="submit">send</button>
</form>

<pre>
dsds
sfsdf
ssdfsd
sdfsd
fs

43565
4
6
5
6
56

54654
6
546
54
6
54
6
546
45
645
6
546
54
6
4
6hhkjhkjhkjhkjhkhkjhkj hkjhkjhkjh hkjhkjh kjhkjhkjh kjhkjhkjhkjhkjhkjhkjhkjhkjhkjhkjhkjhkjhkjhkjh kjhkjh kjhkj jkjhkjhkjh kjh kjhkjhkjh jhkjhkjh kjhkjhkjh kjhkjh
45
6
546
54
654
6
54
654
6
45654
6
46
45
64
56
546
yrt
ht
h

t
</pre>

</body>
</html>

Мусор добавлен для возможности скролировать.
« Последнее редактирование: 14-12-2007 14:58 от Алексей1153++ » Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #4 : 22-02-2006 18:05 » 

http://pajhome.org.uk/crypt/md5/
Тут реализация md4, md5 и sha1 на js. там же можно найти реализацию RSA на java.
Да и вообще не мало полезных программ. Например, в одном файле с sha1 есть ф-ии для кодирования в base64.
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Страниц: [1]   Вверх
  Печать  
 

Powered by SMF 1.1.21 | SMF © 2015, Simple Machines