Открытие окон и методы Window на Javascript
JavaScript имеет много разных тем для изучения, чтобы писать собственный код и правильно выстраивать сайты разного типа. Однако, иногда попадаются наиболее значимые, к примеру — объекты вроде Window. У них есть разные свойства, а также над ними возможно проводить всевозможные операции. Но для начала требуется понять, что из себя представляет этот самый объект – какие свойства у него имеются, а также что с ним допускается делать. Об этом и пойдет речь в данном материале.
Свойства объекта Window: Name, Opener, Closed
Как и у других объектов, у Window есть свои свойства, которые определяют некоторые параметры. С помощью таковых возможно делать те или иные операции, так как именно для такого и нужны свойства. Однако, стоит понимать, что вся суть каждого отличается. С каждым из свойств и требуется сейчас разобраться, чтобы не осталось вопросов и можно было понять, что к чему при работе с Window.
Первое и то, что значимо только тем, кто пишет код на JS – Name. Если говорить иначе, то такой параметр определяет внутреннее имя окна, что открывается. Такое свойство используется чаще всего для того, чтобы изменять наименование Window, если объект уже открыт. Кроме того, параметр Name может вернуть текущее значение внутреннего имени окна при необходимости.
Такой параметр находится в четко выделенном месте в коде. То есть, пользователи не станут видеть такой параметр у себя на странице. Он виден только разработчикам и заключается в оба тега Title. То есть, своего рода, это – «заголовок» окна.
Для указания имени внутреннего окна используется специальный атрибут, называемый Target. Таковой используется, к примеру, на форумах для указания окна, что требуется открыть. На примере может быть такая небольшая строка кода:
target=”searchWindow”
То есть, если человек нажмет на ссылку, то используется специальный атрибут, который и откроется новое окно, которое и имеет имя «searchWindow». А если такового нет, то создастся объект, к которому и присвоится такое наименование. В общем – в любом случае, человеку предоставляется новое окно, у которого в параметре Name обязательно будет указанное значение.
Немаловажную роль также имеет свойство Opener. Его цель – давать «обратную» ссылку. То есть, человек при использовании такого свойства сможет открыть окно, после чего получить адрес на ту страницу, из которой и был открыт объект Window. Вот такая простая задача у такого параметра. Если говорить на примере, то с помощью метода open() можно получить второе окно, в котором будет первое, если использовать свойство opener.
И последнее свойство, что будет важно знать человеку, занимающимся JavaScript–closed. С помощью такового возможно определять логически коду – закрыто окно или же нет. Оно возвращает значение, которое можно использовать для дальнейших целей.
Вот такие параметры имеет объект Window. И когда с ними человек разобрался – можно приступать к следующим этапам изучения открытий новых окон. Об этом и пойдет речь далее.
Как открыть ссылку в новом окне?
Самое простое, что можно изучить при данном вопросе – как открыть ссылку в новом окне, используя всего лишь несколько строк кода. Здесь нужно использовать метод window.open который и предоставляет возможность открывать объект. Но необходимо пояснение с примером, так как требуется понять наглядно, как это делается:
if (key==»brand») {
window.open(‘http://brand.com’,’_blank’); }
Таким образом, ссылка, добавленная на сайт с помощью JavaScript, будет работать и открывать окно с предоставленным адресом. Но бывает и другой случай, когда нужно сделать ссылку на весь блок div в коде. Следовательно, как покажет практика – такой способ, как вверху – не сработает. Для такого существует альтернативное решение:
<div class=»content-block»
onclick=»window.open(‘http://brand.com’,’_blank’)»>
…
</div>
Не сложно догадаться, что пользователям вместо точек можно подставить свои значения для кода. А какие же – возможно узнать на практике, логически дополнительно поразмыслив насчет открытия нового окна. Но на самом деле – ничего сложного в этом нет. Нужно лишь немного усилий приложить и ссылка будет открываться в новом окне.
Как открыть новое окно посредине экрана монитора?
Пользователям также можно попробовать использовать специализированные параметры, чтобы открывать новое окно посередине экрана. Но не обойтись здесь без примера применения. Он предоставляется, в основном, начинающим, но может подойти и продвинутым кодерам для разбора:
varmain_window_width=screen.width;
varmain_window_height=screen.height;varnew_window_width=400; //ширина нового окна 400 пикс
varnew_window_height=500; //высота нового окна 500 пикс
varnew_window_left=(main_window_width-new_window_width)/2; //горизонтальная координата по центру экрана
varnew_window_top=(main_window_height-new_window_height)/2; //вертикальная координата по центру экрана
Здесь используется несколько параметров. Первое – разрешение нового экрана, которое в данном случае составляет 400×500 пикселей. Также, возможно добавить координаты по горизонтали и вертикали, чтобы расположить новое окно на дисплее. Используя такие параметры, возможно получить желаемый объект Window в таком виде, в котором и требовалось.
А чтобы открыть новое окно со специальными параметрами – можно использовать такой пример:
varmy_window=window.open(url, window_title, ‘width=’+new_window_width+’,height=’+new_window_height+’,left=’+new_window_left+’,top=’+new_window_top);
После такого, человек получит новое окно с заданными параметрами. Ничего сложного в этом нет, если разобраться со строением кода.
Каким образом открыть окно определенного размера?
Открыть окно определенного размера здесь так же возможно. И никаких трудностей во время этого процесса не возникнет, так как пользователям требуется выполнить всего лишь одну строку кода:
window.open(«http://example.com», «width=1200»);
Здесь указан пример только с шириной в 1200 пикселей. Однако, возможно к той строке приписать другое значение или же добавить еще высоту, чтобы отрегулировать пользователю новое окно четко определенного размера. К тому же, вместо «http://example.com» возможно вписать любой другой ресурс, что нужно открыть в новой вкладке.
Блокировщик всплывающих окон – проблема?
Иногда, когда требуется сделать всплывающее окно, то может быть затруднение ввиду включенного блокировщика рекламы. Он просто не станет позволять открываться новым окнам в качестве всплывающих. Однако, это возможно преодолеть. Главное – знать, какими способами пользоваться для этого. Ведь может быть такой момент, когда стандартные методы, к которым привыкли пользователи – не работают.
С помощью кода такое тяжело решить, а потому – придется использовать другие методы, что иногда кажутся странными, но зато можно будет хотя бы как-то справиться с ситуацией. Записывая код на JS, требуется понимать, что препятствовать некоторым скриптам могут такие компоненты, как блокировщик всплывающих окон и так далее. Ввиду этого, нужно будет продумать работоспособность своего творения возможно с помощью разных сценариев.
Что стоит попробовать – предупредить пользователей с помощью специальных уведомлений, которые иногда могут давать возможность разрешать всплывающие окна для данных сайтов. И таким образом, человек сможет добиться хотя бы какой-то функциональности своего сайта на тех пользователях, что используют блокировщик рекламы (которая может быть представлена в виде всплывающих окон).
Как взаимодействовать с окном после его открытия?
После того, как окно открыто – оно полностью в распоряжении пользователя. Он может с ним взаимодействовать как хочет. То есть, если там выводится специальная информация для авторизации (к примеру), то стоит туда ввести свои данные. Тогда пользователь сможет войти в свой личный кабинет на какой-либо ресурс.
Когда человек сделает все необходимое с новым окном, что открылось поверх браузера – его возможно закрыть и продолжать работу. Или же допускается его перемещение по экрану, сворачивание или что-то еще – в общем, человек может делать все, что обычно предоставляется из функционала. Вот такой простой сценарий возможно исполнить человеку при желании. И никаких трудностей при этом не возникнет – все очень и очень просто.
