Основы программирования на JavaScript - Марк Кан

Функция unescape делает обратное и позволяет получить "нормальный" текст из window.location.

Вернемся к свойствам window, где имеется свойство opener. Это свойство используется в соединении с обычно используемой функцией window.open, которая позволяет открывать новое окно браузера и, для некоторых свойств управлять его выводом. Блокировщики всплывающих окон очень часто будут препятствовать открытию окна с помощью window.open, если в этот процесс не вовлечен щелчок мышью. Поэтому, если в коде имеется вызов window.open и при этом пользователь не щелкает на ссылке или чем-то подобном, то скорее всего это не будет работать.

Функция window.open получает до 3 аргументов: URL окна, которое надо открыть, имя окна и свойства окна.

var newWindow=window.open('', 'newWindow', 'width=200,height=200'); newWindow.document.write('Это окно будет закрыто через 2 секунды'); setTimeout(function(){ newWindow.close(); }, 2000);

Третий аргумент window.open получает строку аргументов. Обычно используются следующие:

[x]. width, height - задают размеры окна;

[x]. left, top - задают положение окна на экране;

[x]. location, menubar, toolbar, status, titlebar, scrollbars - эти параметры выводят/скрывают свои соответствующие "панели" на окне. Задайте yes, чтобы вывести соответствующую "панель";

[x]. resizable - если задан как yes, то размер окна можно изменять.

Полное описание window.open можно увидеть в документации Mozilla.

Так как мы открываем пустое окно, то первый аргумент будет пустым. Для открытия страницы 'test.html' вызов выглядел бы следующим образом: window.open ('test.html', 'TestWindow', 'width=200,height=200').

В этом примере для объекта window, открываемого окна, задается переменная newWindow. В связи с этим для вывода содержимого в окне необходимо использовать newWindow.document.write.

Функция window.open также имеет свою противоположность, функцию window.close. Однако эта функция может успешно вызываться только на окнах, созданных JavaScript. Если попробовать закрыть окно, созданное не JavaScript, то возможны два варианта: либо появится сообщение, говорящее, что сценарий пытается закрыть окно, либо браузер просто это проигнорирует.

Можно видеть, что в этом примере используется еще одна новая функция setTimeout. Функции setTimeout и setInterval применяются для выполнения кода после указанного интервала времени и обе получают два аргумента: функцию или строку кода и период ожидания в мс. 1 мс = 1/1000 секунды, поэтому для задания выполнения кода через 5 секунд необходимо определить в этом случае для второго аргумента значение 5000.

setTimeout выполнит код один раз после завершения заданного интервала времени. setInterval будет продолжать выполнять код после завершения каждого интервала. При заданном интервале 5000 setInterval будет выполнять код каждые 5 секунд.

Существуют еще две другие функции: clearTimeout и clearInterval, которые отменяют выполнение, через заданные интервалы. Однако для этого необходимо иметь ссылку на вызов setTimeout или setInterval, например:

var myTimeout = setTimeout("alert('Hi!');", 500); clearTimeout(myTimeout);

Если не сохранить ссылку в переменной myTimeout, то не существует способа отменить заданное выполнение. Давайте посмотрим на пример этого в действии:

function createTimeout(text, time){ setTimeout("alert('"+text+"');", time); } var intervals = []; function createInterval(text, time){ // сохраняет интервал в массиве intervals intervals.push(setInterval("alert('"+text+"');", time)); } function tut5(){ if(intervals.length==0) return; // удаляет последний интервал выполнения в массиве intervals clearInterval(intervals.pop()); } Демонстрация в действии Текст для вывода: Время ожидания(в мс): setTimeout setInterval clearInterval

Существует также функция clearTimeout, которая идентична по синтаксису clearInterval.

Важно отметить, что во время ожидания выполнения заданного кода функциями setTimeout или setInterval весь остальной код JavaScript продолжает выполняться. Когда функция setTimeout или setInterval будет готова, она выполнит заданный код, но только после того, как другой код закончит выполнение. Другими словами, setTimeout и setInterval никогда не прерывают для выполнения другой код.

Как говорилось ранее, свойство окна 'opener' можно использовать для доступа к окну, которое открыло текущее окно, а также к любым свойствам, функциям и т.д. этого окна. Например:

<!--page1.html--> <HTML> <HEAD> <script type="text/javascript"> window.open('page2.html', 'TestWindow', 'width=500,height=200,resizable=yes'); </script> </HEAD> </HTML> <!--page2.html--> <HTML> <HEAD> <script type="text/javascript"> document.write('URL окна предка будет : '+window.opener.location); </script> </HEAD> </HTML>

Отметим, что это работает, только если URL открываемого окна находится на том же сервере, что и текущая страница. Если необходимо открыть, например, окно на http://www.webreference.com, то мы не получим доступ к свойствам этого окна. Это поддерживается всеми основными браузерами по соображениям безопасности.

Одной из наиболее часто используемых функций в JavaScript является document.write. Можно сказать, что document.write получает строку и выводит ее на странице. Здесь необходимо только следить за одной вещью. Если страница полностью загрузилась и вызывается document.write, то вся страница будет очищена и на экране будет только результат работы document.write.

Мы уже видели различные свойства объекта document в действии. Например, document.forms возвращает массив всех форм на странице. Здесь также существует несколько свойств, подобных этому.

[x]. document.forms - массив, содержащий все формы на текущей странице;

[x]. document.images - массив, содержащий все изображения на текущей странице;

[x]. document.links - массив, содержащий все ссылки на текущей странице;

[x]. document.anchors - массив, содержащий все анкеры на текущей странице;

[x]. document.applets - массив, содержащий все апплеты на текущей странице;

[x]. document.styleSheets - массив, содержащий все таблицы стилей на текущей странице;

[x]. window.frames - массив, содержащий все фреймы на текущей странице.

Как мы видели в предыдущей лекции, почти все эти свойства можно продублировать с помощью document.getElementsByTagName. Чтобы получить все изображения на странице, можно воспользоваться, например, document.getElementsByTagName('IMG');. Существует три подобные функции:

[x]. document.getElementById - возвращает один элемент на основе его ID;

[x]. document.getElementsByName - возвращает массив элементов, определенных по имени. В отличие от ID многие элементы могут иметь на странице одинаковые имена;

[x]. document.getElementsByTagName - возвращает массив элементов, определенных по имени тега. Имя тега является просто именем тега HTML, т.е. 'DIV', 'IMG', 'TABLE', 'A 'и т.д.

Существует еще одно свойство, document.all, которое выдает массив всех элементов на странице. Однако document.all поддерживается не всеми браузерами, поэтому предполагается, что вместо этого используется функция document.getElementsByTagName('*'), которая также вернет все элементы на странице.

document.body ссылается на тег <BODY>, где должен предположительно находится весь контент. Весь DOM сайта вложен в document.body. Кроме этого, необходимо использовать document.body для определения, что документ был прокручен, и для получения размера окна. К сожалению, это является одной из наиболее сложных вещей, применяемых сегодня в Web-браузерах.

Существует концепция, называемая "Тип документа", которая задает для Web-браузера определенный набор правил. Изменение типа документа заставляет некоторые свойства переместиться из document.body в document.documentElement, но только некоторые свойства и только для некоторых браузеров.

Проще говоря, это является полным беспорядком, поэтому две следующие функции (будем надеятся) выдадут позицию прокручивания и размеры окна независимо от браузера.

function getScrollPos(){ if (window.pageYOffset){ return {y:window.pageYOffset, x:window.pageXOffset}; } if(document.documentElement && document.documentElement.scrollTop){ return {y:document.documentElement.scrollTop, x:document.documentElement.scrollLeft}; } if(document.body){ return {y:document.body.scrollTop, x:document.body.scrollLeft}; } return {x:0, y:0}; } function getWindowDims(){ if (window.innerWidth){ return {w:window.innerWidth, h:window.innerHeight}; } if (document.documentElement && document.documentElement.clientWidth){ return {w:document.documentElement.clientWidth, h:document.documentElement.cliendHeight}; } if (document.body){ return {w:document.body.clientWidth, h:document.body.clientHeight}; } return {w:0, h:0} }