Я знаю, что вы думаете: «Всплывающие окна?» Но вместо того, чтобы смотреть на то, как определенные веб-сайты и программы подстрекают этих гадостей на ничего не подозревающих людей, давайте подумаем о том, что они могут сделать.
Теперь доступно несколько учебных пособий и сценариев, которые позволяют создавать всплывающие окна при нажатии на ссылку; другие открывают всплывающее окно при загрузке страницы.
Но нашли ли вы такие, которые позволяют создавать динамические всплывающие окна — окна разных размеров, форм и конфигураций? Нет? У меня тоже нет.
Всплывающие окна легко создавать: просто вставьте javascript:window.open() в часть HREF любого тега привязки. Проблема в том, что этот подход сделает вашу веб-страницу XHTML недействительной.
Проверка всплывающих окон
<a href="somewhere.html" onclick="javascript:popupWin()">Some Link</a>
Типы документов XHTML 1.0 не позволяют размещать функцию JavaScript в атрибуте HREF тега привязки, но они позволяют добавлять функции в обработчики событий, такие как onclick и onmouseover. Теория добавления этих обработчиков событий хороша; проблема в том, что они выглядят довольно неприглядно в коде XHTML страницы.
Решение состоит в том, чтобы поместить все в сам JavaScript — так или иначе, обработчики событий по сути являются JavaScript!
Один REL, чтобы управлять ими всеми
Давайте начнем с того, что заставит наше всплывающее окно ожить — разметку якоря:
<p><a href="http://www.somewhere.com/" rel="popup|600|400|0|1">SitePoint</a></p>
Заметили что-нибудь необычное? Это верно — атрибут REL тега привязки выглядит иначе, чем обычно.
Это значение:
- сообщает во всплывающем окне JavaScript, должна ли ссылка открываться во всплывающем окне
- диктует ширину и высоту всплывающего окна
- предоставляет значения для включения или выключения атрибутов нового окна
Snap, Crackle, Pop-Up!
Теперь давайте рассмотрим типичный пример функции JavaScript, которая открывает всплывающее окно:
function popupWin(link,attribs) { var popupWin = null; popupWin = window.open(link,'winPopup',attribs); }
Эта функция JavaScript очень похожа на множество других скриптов всплывающих окон, но внешность может быть обманчивой!
Вместо назначения и атрибутов всплывающего окна, указанных в функции window.open() , в приведенной выше функции они передаются в функцию window.open() с attribs переменных link и attribs указанных в функции popupWin() . переменные.
Поп идет JavaScript
Теперь нам нужна функция, которая будет «пауковать» все теги привязки, захватывать и использовать несколько значений из этих тегов и, если они найдут то, что ищут, превратить эти теги привязки во всплывающие ссылки. Вот код:
function popupWindows() { if(!document.getElementsByTagName) { return; } var scrW = screen.availWidth; var scrH = screen.availHeight; var anchors = document.getElementsByTagName("a"); for (var i = 0; i < anchors.length; i++) { var anchor = anchors[i]; var linkDest = anchor.getAttribute("href"); var relIndex = anchor.getAttribute("rel"); var relSplit = relIndex.split("|"); var windowAttributes = ""; if(relSplit[0] == "popup") { if (relSplit[1] > scrW) { pW = scrW - 10; } else { pW = relSplit[1]; } if (relSplit[2] > scrH) { pH = scrH - 40; } else { pH = relSplit[2]; } scrX = (scrW - pW - 10) * .5; scrY = (scrH - pH - 30) * .5; var windowAttributes = "width=" + pW + ",height=" + pH + ",left=" + scrX + ",top=" + scrY + ",screenX=" + scrX + ",screenY=" + scrY; windowAttributes += ",location=" + relSplit[4] + ",resizable=" + relSplit[4] + ",scrollbars=" + relSplit[4]; anchor.setAttribute("href", "javascript:popupWin('" + linkDest + "','" + windowAttributes + "')"); } } } window.onload = popupWindows;
Всплывающее меню
Первая часть JavaScript проверяет, поддерживает ли браузер, открывающий документ, метод getElementsByTagName . Если этого не произойдет, скрипт завершится, и ссылки откроются в том же окне браузера.
if(!document.getElementsByTagName) { return; }
Далее мы назначаем переменные:
-
scrWбудет держать доступную ширину экрана -
scrHбудет держать доступную высоту экрана - якоря будут содержать массив всех тегов привязки на странице
var scrW = screen.availWidth; var scrH = screen.availHeight; var anchors = document.getElementsByTagName("a");
После того, как эти переменные назначены, мы начинаем цикл через теги привязки. При этом мы получаем два значения атрибута текущего тега привязки, HREF и REL . Затем мы разделяем атрибут REL , беря значения между вертикальными полосами и помещая их в массив relSplit .
for (var i = 0; i < anchors.length; i++) { var anchor = anchors[i]; var linkDest = anchor.getAttribute("href"); var relIndex = anchor.getAttribute("rel"); var relSplit = relIndex.split("|");
Следующий блок кода в основном проверяет, является ли первое значение массива relSplit «всплывающим». Если это так, код проверяет следующие два значения массива scrW scrH переменных scrW и scrH сверху. Если любое из значений массива больше, чем переменная, с которой он сравнивается, значение массива будет уменьшено, чтобы соответствовать окну.
Следующие переменные, scrX и scrY , вычисляют позицию левого верхнего угла всплывающего окна, чтобы scrY его на экране.
if(relSplit[0] == "popup") { if (relSplit[1] > scrW) { pW = scrW - 10; } else { pW = relSplit[1]; } if (relSplit[2] > scrH) { pH = scrH - 40; } else { pH = relSplit[2]; } scrX = (scrW - pW - 10) * .5; scrY = (scrH - pH - 30) * .5;
В следующем разделе кода переменной windowAttributes присваивается несколько значений, которые вы обычно находите во всплывающем окне JavaScript: ширина, высота, слева и сверху. Здесь также определены две другие переменные, которые управляют положением всплывающего окна на экране: screenX и screenY .
var windowAttributes = "width=" + pW + ",height=" + pH + ",left=" + scrX + ",top=" + scrY + ",screenX=" + scrX + ",screenY=" + scrY;
Вы можете установить другие атрибуты, обычно связанные с всплывающими окнами JavaScript: просто добавьте их в переменную windowAttributes и используйте другие значения в массиве relSplit в качестве значений атрибута. Помните, что вы должны добавить '0' или '1' , разделенные вертикальной чертой, к значению REL каждой ссылки для каждого атрибута, который вы добавляете в переменную windowAttributes .
Для этого конкретного сценария я не хочу, чтобы отображалась строка адреса. Я также хочу иметь возможность изменить размер окна. Для достижения этих целей я добавляю следующее в переменную windowAttributes :
windowAttributes += ",location=" + relSplit[3] + ",resizable=" + relSplit[4];
После того, windowAttributes переменная windowAttributes установлена, нам нужно установить значение HREF тега привязки, равное обычной функции JavaScript. В нашем примере это достигается с помощью следующего кода:
anchor.setAttribute("href", "javascript:popupWin('" + linkDest + "','" + windowAttributes + "')");
Pop Into Action
Теперь, чтобы это решение работало, мы должны иметь функцию JavaScript, загружаемую при загрузке страницы. Добавление обработчика события onload к тегу BODY может быть достаточным, но это не будет поддерживать нашу цель чистой разметки. Вместо этого в конце JavaScript мы добавим window.onload = popupWindows . Это делает код XHTML более понятным, поскольку все хранится в JavaScript.
Чтобы сделать ваш код XHTML еще более понятным, вы можете переместить эти функции JavaScript во внешний файл и связать его с каждым документом, который использует эти всплывающие ссылки.
Теперь, реализовав это решение, вы можете обнаружить, что любой ваш JavaScript, который использует метод window.onload , больше не работает. Не отчаивайтесь — просто создайте новую функцию с именем initialize и поместите в нее имена двух функций, которые необходимо загрузить при загрузке страницы. Используйте метод window.onload для вызова этой функции.
Например, допустим, у меня есть другой скрипт с именем hideDivs который скрывает определенные hideDivs , пока пользователь не hideDivs ссылку. В этом случае функция JavaScript будет выглядеть так:
function initialize() { popupWindows(); hideDivs(); } window.onload = initialize;
Еще один способ добавить этот скрипт на свою страницу и запустить его при загрузке страницы — это использовать технику закрытия Саймона Уиллисона.
Предостережение браузера
Одной из проблем этого скрипта является тот факт, что, как и веб-стандарты, каждый браузер имеет свой собственный способ реализации этого скрипта.
Например, Internet Explorer 5.x и Opera для Windows и Mac пропускают теги привязки, для которых не указан атрибут REL и переходят к следующему тегу привязки. С другой стороны, браузеры Mozilla и Netscape, похоже, хотят «сломать» скрипт в любом теге привязки, для которого не указан атрибут REL . Они прекращают выполнение скрипта и не реализуют его вообще.
Помните, что если вы используете этот скрипт, атрибут REL должен быть указан для каждого тега привязки на вашей странице.
Общие приложения
Существует несколько вариантов использования такого сценария.
Одним из примеров приложения может быть онлайн-галерея фотографий, где нажатие на миниатюру изображения открывает полноразмерное изображение во всплывающем окне. Кроме того, если изображения имеют разные размеры, размер всплывающего окна может быть указан для каждой фотографии.
Дальнейшее чтение
Чтобы узнать больше о всплывающих окнах и обо всех полезных вещах, которые вы можете с ними сделать, перейдите по следующим ссылкам:
- Создание всплывающих окон без мертвых ссылок от Кристиана Хайльмана
- Изменение размера всплывающего окна для соответствия размеру изображения. Автор Peter Todorov
- Учебник по всплывающему окну JavaScript