15:05 Способ встраивания кода JavaScript, открывающего всплывающее окно |
Всплывающая реклама, которая открывается сама по себе, как только пользователь заходит на веб-страницу, считается неудобной практикой в веб-дизайне. Однако это не означает, что всплывающие окна сами по себе являются чем-то, что не следует использовать. Напротив, во многих случаях они могут быть очень полезны как для веб-мастеров, так и для самих пользователей.  Доступ к определенному содержимому (увеличенному изображению, форме, дополнительному контенту, справке и т.д.) без необходимости покидать страницу, а затем возвращаться назад, чтобы продолжить работу со страницей, на которой вы находились, - это улучшение навигации по содержимому веб-страницы, что всегда желательно с точки зрения удобства использования. Самая простая техника - сделать так, чтобы при активации ссылки пользователем содержимое открывалось в новом окне или вкладке, для чего используется одно из значений свойства "target" ссылки. Хотя существует множество значений, которые могут быть присвоены атрибуту "target", наиболее распространенным и наиболее интересным для нас в этой части является значение "_blank", которое заставляет страницу со ссылкой открываться в новом окне или вкладке. Код, который необходимо использовать, выглядит следующим образом: Код <a href="https://izeseo.com" target="_blank"> переход на izeseo.com </a> Во многих случаях это может быть неудобно, так как заставляет пользователя переключаться между окнами или вкладками для навигации между двумя содержимыми. Чтобы избежать такого рода неудобств, хорошим решением являются всплывающие окна. Помимо варианта, который мы представим ниже, существуют и другие альтернативы, такие как всплывающие окна в DHTML, Flash и т.д., которые, хотя и могут быть более визуально приятными, имеют недостаток в том, что требуют дополнительных кодов и изображений, значительно увеличивают вес страницы, а также являются более сложными решениями и поэтому требуют более высокого уровня знаний. Всплывающие окна в JavaScript В начале этого краткого руководства мы должны предупредить вас, что существует более одного способа сделать всплывающее окно открытым с помощью JavaScript, но есть только один правильный способ, и именно его мы опишем. Но мы также покажем следующие коды, которые не являются правильными, и объясним причины, по которым мы считаем, что их не стоит использовать: Код <a href="#" onClick="window.open('https://izeseo.com','popup', 'width=400px,height=400px')"> переход на izeseo.com </a> Код <a href="javascript:window.open('https://izeseo.com','popup','width=400px,height=400px');"> переход на izeseo.com </a> В обоих кодах, в дополнение к другим недостаткам навигации и удобства использования, наиболее серьезной проблемой является то, что пользователь, у которого в браузере не активированы функции JavaScript, не может получить доступ к отображаемому контенту; что еще хуже, не будет даже никакой реакции на все, что он хочет попробовать по ссылке. Другим серьезным недостатком является то, что ссылка невидима для роботов поисковых систем, поэтому если содержимое, которое вы хотите отобразить в окне, имеет эту ссылку или несколько подобных ссылок в качестве единственного пути доступа, оно не будет существовать для поисковой системы и не будет проиндексировано. Пользователи также не смогут воспользоваться некоторыми функциями, такими как сохранение содержимого в закладках, копирование ссылки и т. д. Это происходит потому, что адрес ссылки обрабатывается в самом коде JavaScript, а не в HTML, что является правильным способом. Таким образом, правильный способ встраивания кода JavaScript, открывающего всплывающее окно, должен выглядеть следующим образом: Код <a href="https://izeseo.com" target="popup" onClick="window.open(this.href, this.target, 'width=400px,height=400px'); return false;"> переход на izeseo.com </a> Как мы видим, прежде всего, адрес ссылки описывается в "href", то есть внутри HTML, а не внутри JavaScript, как в двух предыдущих случаях, и таким же образом определяется способ открытия ссылки ("popup"). Затем указываются размеры окна, которые мы объясним позже, и предложение "return false", которое имеет функцию предотвращения (особенно для некоторых браузеров) возникновения эффектов в исходном окне при нажатии на ссылку. Атрибуты всплывающего окна В коде JavaScript мы можем определить многие характеристики всплывающего окна. В коде, который мы уже видели, мы определяем размеры окна, просто используя свойства widht и height, которым мы можем придать нужные нам значения (в нужных нам единицах), чтобы подогнать размеры окна под размеры содержащегося в нем элемента. Когда открывается всплывающее окно с атрибутами, которые мы обработали в предыдущем коде, окно подгоняется под левый верхний угол экрана. Но мы можем захотеть, чтобы окно открывалось в другой позиции на экране, поэтому мы будем использовать свойства позиционирования "top" и "left", которые отмечают расстояние от каждого из этих краев, также в единицах, которые мы хотим использовать. Продолжая предыдущий пример: Код <a href="https://izeseo.com" target="popup" onClick="window.open(this.href, this.target, 'toolbar=0 , location=1 , status=0 , menubar=1 , scrollbars=0 , resizable=1 ,left=150pt,top=150pt,width=400px,height=400px'); return false;"> переход на izeseo.com </a> Другие элементы, которые могут быть определены, следующие:
В следующих статьях мы рассмотрим, как избежать повторения кода каждый раз, когда нам нужно создать одну из этих ссылок, размещая код в "голове" или в отдельном файле, как открывать окна с помощью кнопок или как открывать всплывающее окно при загрузке страницы. |
|
|
| Всего комментариев: 0 | |