При переборе массива с использованием forEach в Internet Explorer вывалилась ошибка object doesn’t support this property or method

IE 7 не поддерживает конструкцию forEach для массивов [1,2,3] - то есть код вида

array_for = [1,2,3] ;
array_for.forEach = ...
//или
[1, 2, 3].forEach(print)

выдаст ошибку.
Чтобы исправить ошибку следует определить функцию
Array.prototype.forEach = function(callback, thisObj) {
for (var i = 0,len = this.length; i < len; i++)
callback.call(thisObj, this[i], i, this);
};

И вообще, в ie 8 (ie 7 и ie 6) не поддерживаются некоторые функции обхода массивов:
http://stackoverflow.com/questions/2790001/fixing-javascript-array-functions-in-internet-explorer-indexof-foreach-etc

Увеличение скорости загрузки сайта, а также снижение нагрузки на сервер, используя отложенную загрузку изображений при помощи javascript т.н. Lazy Load

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

Вся “фишка” lazy load загрузки картинок в том, что те картинки, которые не видны пользователю попросту не загружаются. То есть, загрузка “нижних” картинок, не попадающих на экран происходит при перемотке страницы.

Lazy Load реализован с использованием различных фреймворков:

• JQuery - http://plugins.jquery.com/project/lazyload
• Mootools - http://davidwalsh.name/mootools-lazyload
• Prototype - http://www.bram.us/projects/js_bramus/lazierload/
• YUI - http://developer.yahoo.com/yui/examples/imageloader/imgloadfold.html

При работе с web-формами генерация содержимого страниц без перезагрузки с использованием технологии AJAX удобна и широко используется. Как быть, если требуется сохранить результат динамически сформированной страницы на локальный компьютер. Конечно, можно выделить нужное, “скопипастить” и сохранить, например в Word. Однако, для удобства пользователя можно предусмотреть возможность получения файла с данными с сервера (экспорт в документ Word, например). Задачу формирования документа в нужном формате пока пропустим (для эксперимента можно воспользоваться “болванкой” test.doc, например) и сразу перейдем к сохранению файла. Однако, не будем забывать, что файл должен генерироваться на основе данных формы и передаваться они будут методом POST (у GET-метода имеются существенные ограничения на длину запроса, что для формирования документов может быть критично)

Подводные камни Ajax-сохранения файла.

Особенность скачивания файлов с использованием Ajax-технологии в том, что “по умолчанию” файл, отдаваемый сервером, попадает туда, откуда был сделан запрос - в JavaScript. То есть после отправки запроса на сервер, браузер, получая ответ, не предлагает “стандартно” сохранить или открыть файл, продолжает выполнение заданного скрипта.

Как скачать файл Ajax-ом?

Итак, если сформулировать задачу более точно, то требуется отправить POST-запрос на сервер и сохранить полученный файл без перезагрузки страницы. Причем, учитывая информацию предыдущего параграфа, отправка запроса должна быть из “реальной” формы и производиться стандартными средствами браузера.

Вариант 0: отправляем данные AJAX, методом POST. Однако, обратно получаем не сам файл, а условный “ключ”, к которому привязываем специально созданный на сервере “промежуточный” файл.  Теперь переход по ссылке с нужным ключом и позволит сохранить нужный файл.

Вариант 1: динамически создаем нужную форму, размещаем в ней нужные поля и отправляем на сервер. Ответ получаем в виде окошка браузера с предложением открыть/сохранить файл.

Вариант 2 очень похож на предыдущий. С мааленьким изменением - всё действо происходит в отдельном IFRAME-элементе, который также формируется динамически. Делается это на случай, если браузер вместо попытки сохранить файл решит уйти с предыдущей страницы с заполненными данными.. В этом случае переход будет осуществлен во внутреннем документе, основная же страница перезагружена не будет.

Если быть более точным, то отправка и сохранение файла “не совсем AJAX” ( совсем не AJAX). Однако, без перезагрузки страницы.

AJAX скачать файл - подборка ссылок:
http://habrahabr.ru/blogs/personal/66772/ - вариант с сохранением временного файла
http://code.msdn.microsoft.com/AjaxFileDownload
http://www.filamentgroup.com/lab/jquery_plugin_for_requesting_ajax_like_file_downloads/

AJAX-загрузка файлов:

http://habrahabr.ru/blogs/jquery/50223/
http://vremenno.net/html-css/file-uploaders-overview/

JQuery - один из наиболее популярных JavaScript фреймворков.
1) просто http://www.rsdn.ru/article/inet/jQuery.xml
2) хорошая документация http://docs.jquery.com/Main_Page
3) куча готовых решений http://docs.jquery.com/Plugins
4) http://visualjquery.com.

Sencha http://www.sencha.com/ (Ext JS, EXT GWT, Sencha Touch, EXT Designer)
http://examples.extjs.eu/ - примеры для Ext JS

Prototype (prototype.js)MooTools
http://mootools.net
script.aculo.us - визуальные эффекты на prototype

YUI

http://habrahabr.ru/blogs/webdev/34918/
http://habrahabr.ru/blogs/webdev/35064/
http://habrahabr.ru/blogs/javascript/35597/ - опросы по javascript фреймворкам

На многих сайтах можно встретить “красивое” увеличение картинок по клику, а также слайдшоу, перемещение между изображениями и некоторые другие функции. При этом особенно удачно иногда используется затемнение оставшейся части экрана. Получается lightbox (дословно что-то вроде “светлая коробка”).

Рассмотрим некоторые инструменты, с использованием которых можно легко разместить всплывающие изображения в lightbox у себя на сайте.

Собственно lightbox (ныне Lightbox 2)
Скрипт использует библиотеки prototype.js и scriptaculous.js Если не считать их, то размер скрипта довольно мал. http://www.lokeshdhakar.com/projects/lightbox2/

Lightview
Скрипт использует JavaScript-библиотеки prototype.js и scriptaculous.js
Сайт и демо: http://www.nickstakenburg.com/projects/lightview/

LightWindow
Также использует упомянутые библиотеки javascript. Вполне функционален.
http://stickmanlabs.com/lightwindow/

jQuery lightBox plugin
фактически плагин для Jquery с функционалом, аналогичным lightbox-оригиналу.
http://leandrovieira.com/projects/jquery/lightbox/

Highslide.js
Не использует дополнительных javascript-фреймворков. Полностью автономный скрипт с довольно внушительным функционалом. Позволяет внедрять не только изображения, но и страницы, HTML-код, flash. Удобно реализована работа с галереями изображений - предпросмотр
http://highslide.com/

FancyBox для JQuery
Похоже, лучшее решение для jquery - куча возможных вариантов анимации, работа с галереями изображений. В общем, смотреть примеры на
http://fancybox.net/

jsImageBox
очень компактный автономный скрипт без использования фреймворков
http://jsimagebox.ru/

Shadowbox.js
Решение может использовать как любой из нескольких популярных фреймворков, так и обходиться без них - нужный вариант можно загрузить с сайта
http://shadowbox-js.com/

jQuery (Tools) overlay
http://flowplayer.org/tools/overlay/index.html
Конечно, такое количество lightbox-скриптов не обязательно использовать на собственных сайтах. Вполне достаточно освоить один из вариантов. Хотя, знать о существовании альтернатив иногда бывает полезно.

Задача:

Используя javascript динамически формировать options у html элемента select.

Вариант решения с использованием свойства innerHTML:

html:
<select id="select1"><option value="val1">text1</option></select>

javascript:
myselect = document.getElementById('select1');
select1.innerHTML = '<option value="val2">text2</option><option value="val3">text3</option>';

Такое решение не везде работает  (mozilla firefox этот код обрабатывает. Opera и IE отказались напрочь)

http://support.microsoft.com/kb/276228 - с официального сайта Microsoft про innerHTML у Select. Там же варианты “обхода” этого бага.

Вариант 1 - использование js массива .options[] у элемента select:
select1.options[i] = new Option(i,i);

Вариант 2 - замена innerHTML у родительского элемента (т.е. HTML должен включать сам тэг select):
<div id="out1"><select ..> </select></div>
js: document.getElementById ('out1').innerHTML = '<select id="select1" name="select1"><option ...>...</option></select>';

ps. Все-таки наткнулся на решение на одном из лучших (на мой взгляд) ресурсов по web:
Javascript SELECT - динамические списки

UPD2 Вариант получения данных для формирования элемента select через ajax: Для передачи в JavaScript пар ID:значение используем responseText в формате JSON, значение которого вычисляем при помощи функции eval.


data = eval (transport.responseText);
for (i=0; i< =data.length-1; i++)
myElement.options[i]=new Option(data[i][1],data[i][0])
При этом скрипт должен отдавать массив в виде:
[
['1','название первого элемента'],
['2','название второго элемента'],
]

Prototype.js - один из популярных javascript фреймворков.
www.prototypejs.org - официальный сайт Prototype - там есть как документация, так и примеры.

http://www.prototypejs.org/learn/json -

Сразу скажу, что  “нормально” реализовать json на prototype у меня не получилось… -примеры с официального сайта “не пошли”.
prototype version 1.5.0

person = '/*-secure-\n{"name": "Violet", "occupation": "character"}\n*/'.evalJSON()
person.name;
//-> "Violet"

Такого рода конструкция работала только через eval():

var d='{ "name":"Violet","occupation":"character" }'; //json string
d = eval('(' + d + ')');
alert (d.name);

В итоге, вместо json принял решение использовать старый добрый innerHTML:

$("result").innerHTML= transport.responseText;

Возможно, дело в кривых руках (отсутствии документации, времени, мозгов ), однако, не исключено, что в “Last updated on May 1st, 2007″…

Да.. почему prototype.. Проект изначально построен с его использованием…

Потребовалось перед отправкой формы изменить “адресат” - action у формы. По идее ничего сложного -
document.form1.action = 'new_address.html';
или аналогичные

document.getElementById('form1').action = 'new_address.html';
document.forms[0].action = 'new_address.html';

однако, такого рода конструкция работает везде, кроме internet explorer…
Объясняется это тем, что в IE нет различий между свойствами и атрибутами.
Поиск подсказал, что для изменения action у формы можно использовать setAttribute
document.form1.setAttribute("action","'new_address.html")
Но и в этом случае, internet explorer не порадовал.
Однако, различия, все-таки обнаружены - оба варианта для internet explorer:
- для случая “form1.action = …” браузер выдал ошибку “object doesn’t support …”;
- для случая “form1.setAttribute();” ie отправляет по старому адресу;

После очередной порции поисков по интернету, размышления над JavaScript мануалами изобразил что-то вроде:

o=document.getElementById('form1');
o.setAttribute("action","new_address.html"); // в IE "пустышка", но ошибку не выдает
// рабочая конструкция для IE - изменяет action для формы путем перебора всех атрибутов
for (var i=0; i < o.attributes.length; i++) {
if (o.attributes[i].nodeName == 'action') {
o.attributes[i].nodeValue = 'new_address.html';
break;
}
}

Понимаю, что решение далеко от идеального, однако, работает
Да здравствует IE!..
ps. В очередной раз встает вопрос “А для кого стандарты?”

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

Но сейчас не об этом.

Как защитить сайт от копирования?

0. Первое и самое главное, что следует усвоить: Если сайт можно просмотреть, то его можно и скопировать. Поэтому, вся так называемая защита от копирования, обычно помогает от пользователя неискушенного. Хотя, чаще всего, именно такие и хотят “скопировать” текстовую информацию или картинки с сайта.

Ну что ж.. А теперь перейдем к приемам, которые помогут защитить Ваш сайт от копирования:

1. Запрещаем кэширование страниц сайта. Это можно сделать несколькими способами:
Тэг HTML:
<meta http-equiv="Pragma" content="no-cache" />
или:
<meta http-equiv="Cache-Control" content="no-cache" />
Или
<meta http-equiv="no-cache" />
HTTP-заголовок (header):

Прочитать более подробно о кэшировании страниц

2. Запрещаем вызов контекстного меню в Internet Explorer
<body oncontextmenu="return false;" ondragstart="return false;">

3. Запрещаем выделение текста для копирования в Internet Explorer:

<script language="JavaScript">
document.onselectstart = returnfalse;
//запрещаем выделение
document.ondragstart = returnfalse;
//запрещаем перетаскивание
function returnfalse() {
return false;
}
</script>

4. пользуемся функциями escape | unescape
<script language="javascript">
mystring = "%u0412%u0441%u0442%u0430%u0432%u044C%u0442%u0435%20%u0442%u0435%u043A%u0441%u0442.";
document.write (unescape(mystring));
</script>

5. Для защиты изображений от копирования рекомендуется использовать так называемые водяные знаки или ватермарки (watermark) - наложение на изображение “полупрозрачного” изображения с названием своего сайта, или любого другого изображения, которое “идентифицирует” Вас, как владельца. Многие владельцы сайтов отказываются от копирования изображений с водяными знаками, на которых указан сайт “оригинал”.

6. Для защиты текста сайта от копирования  существуют сервисы, отслеживающие уникальность текста. Например CopyScape.com. Конечно же, по сути, сервис напрямую не защищает текст от копирования, однако, если в сети появится сайт с текстом, который “очень похож” на текст Вашего сайта, Вы об этом узнаете, и сможете сообщить “куда надо”

Чтобы подключить на одной странице два (или более) редактора FCKEditor можно “дублированием кода” создать дополнительный объект, задать требуемый параметр name формы (при создании) и вывести код в нужное место.

$fckeditor= new FCKeditor('description');
//устанавливаем  все настройки для первого fckeditor
$fckeditor->BasePath = '/fckeditor/';
$fckeditor->Height = '400px';
$fckeditor->Value = $value['description'];
$fckeditor->Create();  //выводим HTML-код первого редактора fckeditor
unset ($fckeditor); //не обязательно

$fckeditor= new FCKeditor(’full_description’); // второй редактор
//устанавливаем  все настройки для первого fckeditor
$fckeditor->BasePath = ‘/fckeditor/’;
$fckeditor->Height = ‘400px’;
$fckeditor->Value = $value[’full_description’];
$fckeditor->Create();  //выводим HTML-код первого редактора fckeditor
unset ($fckeditor); //не обязательно

Способ, возможно, не самый рациональный, но рабочий. В общем-то ничего сложного, но может оказаться полезным для установки второго (третьего..) редактора “на скорую руку”