Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы JavaScript

Урок 20. Объект window - открытие/закрытие/изменение окон, управление положением и размерами окон.

Содержание курса

Объект window - открытие/закрытие/изменение окон

Здесь мы рассмотрим методы:

open() - открывает новое окно
close() - закрывает окно, открытое при помощи open()
focus() - передаёт фокус на указанное окно
blur() - убирает фокус с окна

open() и close()

Существует два варианта вызова метода open() - с одним параметром и с тремя параметрами. Первый параметр всегда адрес страницы, которую нужно открыть:

open("http://nostroma.online");

В этом случае работа метода аналогична клику по ссылке с атрибутом target="_blank", т.е. открывается новая вкладка и в нее загружается документ по ссылке.

При вызове метода open() с тремя параметрами указывается адрес страницы, внутренне имя окна и третьим параметром прописываются свойства вновь открываемого окна: размеры окна, его положение, координаты окна и т.д. Эти свойства задаются через запятую в виде пар свойство=значение:

open("http://nostroma.online", "myWindow", 
     "width=300, height=200, top=200, left=300");

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

var wmd = open("http://nostroma.online", "myWindow", 
     "width=300, height=200, top=200, left=300");
	 
wmd.document.write("Управление окном");
wmd.close();

Из соображений безопасности изменение кода документа, загруженного во вновь открытое окно, через JavaScript возможно только если документ и код JavaScript изменяющий его с одного хоста.


Пример HTML:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Управление окном</title>
		</head>
		<body>
		
		<h1>Управление окном</h1>
		
		<a href="javascript: opn()">Открыть окно</a><br />
		<a href="javascript: cls()">Закрыть окно</a>
		
		<script>
		
			var wmd;
			
			function opn(){
				 wmd = open("http://nostroma.online", "myWindow", "width=300, height=200, top=200, left=300");
			}
			
			function cls(){
				wmd.close();
			}
			
		</script>
		</body>
	</html>
Показать в браузере (откроется в новой вкладке)

Как видно из примера метод close() позволяет закрыть открытое окно. Для этого его нужно вызвать у переменной, в которой сохранён объект открытого окна.

Печать окна

Для печати окна существует метод JavaScript print(), который имитирует нажатие кнопки "печать" в меню браузера. По умолчанию печатается вся страница (и меню, и шапка, и подвал сайта), однако это можно изменить при помощи блока CSS @media print выставив соответствующим элементам display: none:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Печать окна</title>
			<style>
				@media print{
					#header, #footer, #menu, input{display:none;}
				}
			</style>
		</head>
		<body>
			<div id="header">Шапка сайта</div>
			<div id="menu">Меню сайта</div>
			
			<div id="content">
			Основное содержимое страницы то, что нужно распечатать
			</div>
			
			<div id="footer">Подвал сайта</div>
			<input type="button" value="Распечатать" onclick="print()" />
		</body>
	</html>
Показать в браузере (откроется в новой вкладке)

Нажав на кнопку "печать" в этом примере, вы увидите в окне предварительного просмотра только блок с id = "content". Согласитесь, для пользователя это будет ну очень удобно!

focus() и blur()

Методы focus() и blur() позволяют передать фокус на окно или элемент, или убрать его, соответственно.

Если, к примеру, открыто множество окон браузера наложенных друг на друга, то метод blur(), применённый к данному окну, уберёт его под самый низ этой "стопки", а метод focus() наоборот - переместит на передний план.

Рассмотрим наипростейший пример, который продемонстрирует работу методов focus() и blur(). В коде ниже прописаны 4 поля ввода и 8 кнопок, каждая пара кнопок может передать или убрать фокус с того поля, к которому она привязана:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>focus() и blur()</title>
		</head>
		<body>
		
		<input type="text" id="txt1" />
		<input type="button" id="txt1bp" value="передать фокус" />
		<input type="button" id="txt1bm" value="убрать фокус" />
		<br /><br />
		
		<input type="text" id="txt2" />
		<input type="button" id="txt2bp" value="передать фокус" />
		<input type="button" id="txt2bm" value="убрать фокус" />
		<br /><br />
		
		<input type="text" id="txt3" />
		<input type="button" id="txt3bp" value="передать фокус" />
		<input type="button" id="txt3bm" value="убрать фокус" />
		<br /><br />
		
		<input type="text" id="txt4" />
		<input type="button" id="txt4bp" value="передать фокус" />
		<input type="button" id="txt4bm" value="убрать фокус" />
		<br /><br />
		
		<script>
			document.querySelector('#txt1bp').addEventListener('click', function(){
				document.querySelector('#txt1').focus();
			});
			document.querySelector('#txt1bm').addEventListener('click', function(){
				document.querySelector('#txt1').blur();
			});
			
			document.querySelector('#txt2bp').addEventListener('click', function(){
				document.querySelector('#txt2').focus();
			});
			document.querySelector('#txt2bm').addEventListener('click', function(){
				document.querySelector('#txt2').blur();
			});
			
			document.querySelector('#txt3bp').addEventListener('click', function(){
				document.querySelector('#txt3').focus();
			});
			document.querySelector('#txt3bm').addEventListener('click', function(){
				document.querySelector('#txt3').blur();
			});
			
			document.querySelector('#txt4bp').addEventListener('click', function(){
				document.querySelector('#txt4').focus();
			});
			document.querySelector('#txt4bm').addEventListener('click', function(){
				document.querySelector('#txt4').blur();
			});
		</script>
		
		</body>
	</html>
Показать в браузере (откроется в новой вкладке)

Несмотря на то, что код кажется длинным, одни и те же события повторяются в нём для разных элементов (4 поля ввода и 8 кнопок). Это сделано для наглядности работы методов.

Такой же фокус можно проделать и со вновь открытым окном. В коде ниже при нажатии на кнопку "открыть окно" - открывается новое окно; при нажатии на кнопку "убрать фокус" окно пропадает под самы низ, а при нажатии на "передать фокус" - вновь появляется:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>focus() и blur() для окна</title>
		</head>
		<body>
		
		<h1>focus() и blur(): работа с окнами</h1>
		
		<input type="button" id="opn" value="открыть окно" />
		<br /><br />
		
		<input type="button" id="blr" value="убрать фокус" />
		<br /><br />
		
		<input type="button" id="fcs" value="передать фокус" />
		<br /><br />
		
		<input type="button" id="cls" value="закрыть окно" />
		
		<script>
			
			var myWindow;
			
			document.querySelector('#opn').addEventListener('click', function(){
				myWindow = open("", "myWindow", "width=300, height=200, top=200, left=300");
			});
			
			document.querySelector('#blr').addEventListener('click', function(){
				myWindow.blur();
			});
			
			document.querySelector('#fcs').addEventListener('click', function(){
				myWindow.focus();
			});
			
			document.querySelector('#cls').addEventListener('click', function(){
				myWindow.close();
			});
		</script>
		
		</body>
	</html>
Показать в браузере (откроется в новой вкладке)

Следует отметить, что методы focus() и blur() можно вызывать у любого объекта window, за исключением, разве что, фреймов - там много неясностей, да и к тому же они уже давно устарели.

Объект window - положение и размеры окон

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

Метод Описание Пример
moveTo() Перемещает окно в указанные координаты. Координаты указываются для левого верхнего угла окна window.moveTo(100, 100)
scrollTo() Прокручивает окно до указанных координат прокрутки по горизонтали и вертикали window.scrollTo(0, 1400)
resizeTo() Изменяет размер окна. Указывается ширина и высота window.resizeTo(700, 500)
scrollBy() Прокручивает окно на указанное число пикселей по горизонтали и вертикали относительно текущего положения полос прокрутки window.scrollBy(0, 40)
moveBy() Смещает открытое окно относительно текущего положения по горизонтали и вертикали на указанное число пикселей. window.moveBy(40, 40)
resizeBy() Увеличивает размер окно на указанное число пикселей window.resizeBy(10, 10)

Для наглядности ниже приведён пример работы описанных методов в виде кнопок. Для начала нажмите "открыть окно", затем нажимайте кнопки с названием новых методов:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Положение, размер и прокрутка окна</title>
		</head>
		<body>
		
		<h1>Положение, размер и прокрутка окна</h1>
		<input type="button" onclick="opn()" value="открыть окно" />
		<br /><br />
		
		<input type="button" onclick="mvt()" value="moveTo()" />
		<br /><br />
		
		<input type="button" onclick="scrt()" value="scrollTo()" />
		<br /><br />
		
		<input type="button" onclick="rszt()" value="resizeTo()" />
		<br /><br />
		
		<input type="button" onclick="scrb()" value="scrollBy()" />
		<br /><br />
		
		<input type="button" onclick="mvb()" value="moveBy()" />
		<br /><br />
		
		<input type="button" onclick="rszb()" value="resizeBy()" />
		<br /><br />
		
		<script>
			var myWindow;
			
			function opn(){
				myWindow = open("", "myWindow", "width=300, height=200, top=200, left=300");
			}
			
			function mvt(){
				myWindow.moveTo(100, 100);
			}
			
			function scrt(){
				myWindow.scrollTo(0, 1400);
			}
			
			function rszt(){
				myWindow.resizeTo(700, 500);
			}
			
			function scrb(){
				myWindow.scrollBy(0, 40);
			}
			
			function mvb(){
				myWindow.moveBy(40, 40);
			}
			
			function rszb(){
				myWindow.resizeBy(10, 10);
			}
		</script>
		
		</body>
	</html>
Показать в браузере (откроется в новой вкладке)

Помимо положительных значений, у этих методов могут быть и отрицательные значение, в этом случае окно будет уменьшаться, прокручиваться вверх, а не вниз и т.д.

Вот вам пример вирусного кода с использованием изученных методов, который при запуске начнёт открывать 1000 окон, каждое в произвольном месте монитора. Не советую пробовать это на своём компьютере, просто посмотрите на код и оцените его работу в своём воображении, подумайте, что и как начнёт происходить при его запуске:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Вирус</title>
		</head>
		<body>
			<h1>Вирус</h1>
			<input type="button" onclick="virus()" value="Запустить вирус!" />
			
		<script>
			function virus(){
				for(var i = 0; i<1000; i++){
					var wnd = open("", "", "width=300, height=200, top=200, left=300");
					r1 = Math.random()*1000;
					r2 = Math.random()*1000;
					wnd.moveTo(r1, r2);
				}
			}
		</script>
		
		</body>
	</html>

Если вам уж сильно хочется посмотреть на работу этого "шедевра", измените значение i<1000 на, к примеру, i<8, тогда будут открыты 8 окон в произвольном месте монитора - с этим ещё можно справиться).

Следующий пример продемонстрирует работу двух функций - одна при своём вызове будет открывать несколько окон, а вторая их закрывать. Здесь нам понадобится массив, в который мы будем записывать объект вновь открытого окна. Поскольку массив мы будем использовать в двух разных функциях, то объявить для него переменную нужно глобально. Объекты открытых окон будем добавлять в массив методом push(). Также пропишем две кнопки для удобства - одна будет вызывать функцию, открывающую окна, вторая - функцию их закрывающую:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Функции открытия и закрытия окон</title>
		</head>
		<body>
			<h1>Функции открытия и закрытия окон</h1>
			<input type="button" onclick="opn()" value="Открыть 10 окон" />
			<input type="button" onclick="cls()" value="Закрыть все окна" />
			
			<script>
				var arr;
				
				function opn(){
					arr = new Array();
					for(var i = 0; i< 10; i++){
						var wnd = open("", "", "width=300, height=200, top=200, left=300");
						arr.push(wnd);
						r1 = Math.random()*1000;
						r2 = Math.random()*1000;
						wnd.moveTo(r1, r2);
					}
				}
				
				function cls(){
					/* Проверяем условием существует ли массив */
					if(arr){
						for(var i = 0; i< arr.length; i++){
							arr[i].close();
						}
						
					/* После закрытия всех окон уничтожаем массив */
						arr = null;
					}	
				}
			</script>
			
		</body>
	</html>
Показать в браузере (откроется в новой вкладке)

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля

Комментарий №1
30-12-2018 17:21:54
Просто Серега
Ого, щас я прикалюсь ))))))))))