ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Создание новых окон

Браузеры позволяют открывать новые окна и настраивать их, например, регулировать высоту, ширину, размещение на экране и даже отображение полос прокрутки, меню или адресной строки. Для этого используется метод open(), имеющий следующую структуру:

open(URL, name, properties)

Метод open() принимает три аргумента. Первый - URL-aдpec страницы, которая должна появиться в открывшемся окне, то же значение следует использовать для атрибута href ссылок (например, http.// www.google.com, /pages/map.html или ../../portfolio.html). Второй аргумент - имя окна, оно может быть любым, на ваше усмотрение. Наконец, в качестве третьего параметра вы можете передать методу строку, в которой содержатся настройки для нового окна (например, его высота и ширина).

Дополнительно при открытии нового окна обычно создается переменная для хранения ссылки на него. Например, если вы хотите открыть домашнюю страницу сервиса Google в новом окне площадью 200 квадратных пикселей, напишите код:

var newWin = open("https://google.ru", "theWin", "height=400,width=400");

Данный код открывает новое окно и сохраняет ссылку на него в переменной newWin.

Имя, которое вы присваиваете новому окну (в рассматриваемом случае 'theWin' ), делает не так много. Однако после присвоения окну имени, если вы попытаетесь открыть новое окно, используя то же имя, то вы не получите нового окна. Вместо этого, веб-страница, запрошенная посредством метода open(), загрузится в созданном ранее окне, которому присвоено данное имя.

Свойства окна

Окна браузера включают множество различных компонентов: полосы прокрутки, маркеры масштабирования, панели инструментов и т. д.. Кроме того, они имеют определенные ширину, высоту и положение на экране. Большую часть этих свойств можно определить при создании нового окна с помощью строки, которая содержит разделенный запятыми список свойств и их значений, передаваемой в качестве третьего аргумента метода open(). Например, для установки ширины и высоты нового окна, а также отображения адресной строки напишем следующее:

var winProps =  "height=300,width=400,location=yes";
var newWin = open("test48.php", "aWin", winProps);

При настройке свойств, определяющих размеры или положение окна, мы пользуемся значениями в пикселях, тогда как другие свойства регулируются логическими значениями yes (включить свойство) или no ( отключить свойство). Если для такого свойства логическое значение не задано, то браузер отключит его по умолчанию ( например, если вы не задали свойство location, то браузер скрывает адресную строку, которая обычно появляется в верхней части окна). Только свойства height, width, left, top и toolbar работают одинаково во всех браузерах. Как указано в следующем списке, некоторые браузеры полностью игнорируют некоторые из этих свойств, так что если вы создаете всплывающие окна с помощью языкaJavaScript, то обязательно протестируйте их во всех браузерах.

  1. heiqht задает высоту окна в пикселях. Вы не можете устанавливать иные единицы измерения, кроме пикселей. Если значение :не задано, браузер исходит из высоты текущего окна.
  2. width указывает ширину окна. Здесь также допустимы только значения в пикселях, а если значение не задано, то браузер исходит из ширины текущего окна.
  3. left задает позицию в пикселях от левого края монитора .
  4. top задает позицию в пикселях от верхнего края монитора .
  5. scrollbars задает полосы прокрутки, которые находятся в правой и нижней частях окна браузера, если размер страницы превышает размер окна. Чтобы скрыть полосы прокрутки, установите для этого свойства значение no. Вы не можете выбирать, какую из полос скрыть (либо обе отображены, либо обе скрыты), а некоторые браузеры, например, Chrome и Safari не позволяют скрыть полосы прокрутки.
  6. status контролирует отображение строки состояния в нижней части окна. Браузеры Firefox и Internet Explorer обычно не позволяют скрывать строку состояния, так что в этих браузерах она видна всегда.
  7. toolbar определяет видимость панели инструментов, содержащей кнопки навигации, вкладки и другие элементы, доступные в данном браузере. В программе Safari настройки панели инструментов и адресной строки одинаковы: включение любого из параметров активирует и панель инструментов, и адресную строку.
  8. location определяет отображение поля навигации, которое также называют адресной строкой. Это поле содержит URL-aдpeca веб-страниц и дает возможность перехода к другой странице путем ввода нового адреса. Браузеры Opera, Internet Explorer и Firefox не позволяют скрывать адресную строку. Это свойство предотвращает неподобающее использование языка JavaScript, например, для открытия нового окна и перехода на другой сайт, похожий на тот, который вы только что покинули. В браузере Safari включение этого свойства активизирует панель инструментов и поле навигации.
  9. menuЬar относится к браузерам, имеющим меню в верхней части окна (например, Файл (File) и Правка (Edit), обычные для большинства программ). Это свойство применимо только к браузерам, работающим в среде Windows; в операционной системе OS Х меню расположено в верхней части экрана, а не в индивидуальном окне. Данное свойство не применимо к браузеру Internet Explorer 7 и более поздним версиям, которые не содержат меню.
  10. resizable отвечает за возможность изменения размеров окна (yes - можно изменять размер, no - нельзя изменять размер).

Использование ссылки на окно

Открыв новое окно, вы можете использовать ссылку на него для контроля над ним. Например, вы открываете новое окно с помощью следующей команды:

var newWin = open("test48.php", "theWin", "height=400,width=400");

Переменная newWin содержит ссылку на новое окно. Вы можете применить к этой переменной любой из методов окна браузера для контроля над окном. Например, если вы хотите закрыть его, то воспользуй­тесь методом close():

newWin.close();

Браузеры поддерживают различные методы для объекта окна, среди них можно выделить наиболее часто используемые:

  1. close() закрывает указанное окно. Например, команда close() закрывает текущее окно. Однако данный метод можно применить и к ссылке на окно: например, newWin. close(). Вы можете назначить выполнение этой инструкции любому событию, например, такому, как щелчок по кнопке, говорящей "Закрой это окно".
  2. blur() выводит окно "из фокуса". Это означает, что окно перемещается на задний план под все открытые окна. Это способ скрыть открытое окно, его используют специалисты по веб-рекламе, чтобы создавать рекламные объявления типа «рорunder» - окна, скрытые под текущими, таким образом, что закрыв все окна, посетитель страницы обнаружит надоедливую рекламу.
  3. focus() противоположен методу blur(), помещает окно поверх всех других окон.
  4. moveBy() позволяет перемещать окно на заданное число пикселов вправо и вниз. Вы должны передать методу два аргумента. Первый указывает число пикселей, на которое окно следует передвинуть вправо, а второй - число пикселвей, на которое окно следует передвинуть вниз. Например, код newWin. moveBy (200,300); перемещает окно, на которое ссылается переменная newWin, на 200 пикселей вправо и на 300 пикселей вниз. Вы также можете использовать отрицательные значения, таким образом, для передвижения окна на 100 пикселей вверх и на 300 пикселей влево, вы можете использовать следующий код: newWin.moveBy(-100,-300);
  5. moveTo() позволяет перемещать окно в заданное место на экране. Эта команда эквивалентна использованию свойств left и top при открытии нового окна. Например, чтобы поместить окно строго в левом верхнем углу монитора, напишите следующий код: moveTo(0,0);
  6. resizeBy() изменяет ширину и высоту окна. Первый из двух аргументов определяет, на сколько пикселей должна увеличиться ширина окна, а второй - на сколько пикселей должна стать больше высота. Например, код resizeBy(100,200); делает текущее окно на 100 пикселей выше и на 200 пикселей шире. Для уменьшения размеров окна используйте отрицательные значения.
  7. resizeTo() изменяет размеры окна на заданные. Например, код resizeTo(200,400); задает для текущего окна ширину 200 пикселей и высоту 400 пикселей.
  8. scrollBy() прокручивает документ внутри окна на заданное количество пикселей вправо и вниз. Например, код scrol1By(200,100); прокручивает документ вниз на 200 пикселей и вправо на 100 пикселей. При невозможности прокрутки документа (когда он целиком помещается внутри окна или достигнут его конец) функция недоступна.
  9. scrollТо() прокручивает документ внутри окна на заданную позицию по отношению к левому и верхнему краям. Например, код scrollTo(100,200); прокручивает текущий документ на 200 пикселей от верхнего края окна и на 100 пикселей от левого. При невозможности прокрутки документа (когда он целиком помещается внутри окна или достигнут его конец) функция недоступна.

События, открывающие новое окно

За время короткой истории Всемирной паутины всплывающие (popup) окна завоевали дурную репутацию. К сожалению, многие сайты злоупотребляют методом open() для внезапного открытия окон перед глазами ничего не подозревающих посетителей. В настоящее время большинство браузеров снабжены возможностью блокировки всплывающих окон, так что, даже если вы добавили кoд JavaScript для открытия нового окна при загрузке или закрытии страницы, браузер не позволит ему появиться. Посетитель либо увидит сообщение о том, что всплывающее окно заблокировано, либо вообще не узнает об этом событии.

На деле многие браузеры не позволяют открывать новое окно в ответ на большинство событий вроде передвижения указателя мыши или нажатия клавиш. Единственный надежный способ применить команды JavaScript для открытия окон состоит в запуске действия после щелчка по ссылке или отправки формы. Для этого вы добавляете событие click к любому элементу НТМL-кода (не обязательно к ссылке) и открываете новое окно. Например, вам нужно открыть некоторые ссылки на странице в новом окне площадью 300 квадратных пикселов с полосами прокрутки и маркерами масштабирования, но без хрома браузера вроде панели инструментов. Вы можете добавить имя класса - например, popup, к каж­дой из ссылок, и затем добавить на страницу следующий код jQuery:


$(document).ready(function(e) {
$(".popup").click(function(e) {
var winProps = "height=300,width=400, resizable=yes, scrollbars=yes";
var newWin = open($(this).attr("href"), "aWin", winProps );
return false;
});
});
<!DOCTYPE html>
<html>
<title>Создание новых окон</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link href="../../css/w3.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
$(".popup").click(function(e) {
var winProps = "height=300,width=400, resizable=yes, scrollbars=yes";
var newWin = open($(this).attr("href"), "aWin", winProps );
return false;
});
});
</script>
<body class="w3-light-grey">
<div class="w3-content w3-layout-container" >
<div class="w3-twothird w3-col s10" style="margin:0 10%">
<div class="w3-container w3-card-2 w3-white w3-margin-bottom" style="height:550px" >
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-anchor fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Создание новых окон</h2>
<a class="popup" href="test48.php" >Активация</a>
</div>
<div style=" clear:both"></div>
<footer class="w3-container w3-teal w3-center w3-margin-top " style="height:80px; padding-top:20px;">
<i class="fa fa-facebook-official w3-hover-text-indigo w3-large"></i>
<i class="fa fa-instagram w3-hover-text-purple w3-large"></i>
<i class="fa fa-snapchat w3-hover-text-yellow w3-large"></i>
<i class="fa fa-pinterest-p w3-hover-text-red w3-large"></i>
<i class="fa fa-twitter w3-hover-text-light-blue w3-large"></i>
<i class="fa fa-linkedin w3-hover-text-indigo w3-large"></i>
</footer>
</div>
</body>
</html>