JavaScript - Объект window: перемещение и изменение размеров окон

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

В JavaScript для перемещения окна доступны следующие методы:

  • moveTo() -предназначен для перемещения левого верхнего угла окна в указанную точку экрана;
  • moveBy() - предназначен для перемещения окна на указанное количество пикселей относительно его текущего положения.

Метод moveTo() объекта window

Синтаксис метода moveTo():

window.moveTo(x,y);

Параметры метода:

  • x - число (количество пикселей), которое задаёт горизонтальную координату левого верхнего угла окна браузера относительно верхнего левого угла экрана дисплея;
  • y-число(количество пикселей), которое задаёт вертикальную координату левого верхнего угла окна браузера относительно верхнего левого угла экрана дисплея.

Метод moveBy() объекта window

Mутод moveBy() имеет следующий синтаксис:

window.moveBy(x,y);

Параметры метода:

  • x - положительное или отрицательное целое число, которое указывает количество пикселей, на которые необходимо переместить окно браузера относительно его текущего положения в горизонтальном направлении;
  • y - положительное или отрицательное целое число, которое указывает количество пикселей, на которые необходимо переместить окно браузера относительно его текущего положения в вертикальном направлении.

Пример:

<script>
var myWindow;
function openWindow() {
  myWindow = window.open("","","width=200,height=200");
}
function moveWindowTo() {
  if (myWindow && !myWindow.closed) {
    myWindow.moveTo(300,300);  
	myWindow.focus();
  }
}
function moveWindowBy(x,y) {
  if (myWindow && !myWindow.closed) {
    myWindow.moveBy(x,y); 
	myWindow.focus();	
  }
}
</script>
...
<button onclick="openWindow()">Открыть окно</button>
<button onclick="moveWindowTo()">Переместить левый угол окна в точку (300,300)</button>
<button onclick="moveWindowBy(50,50)">Переместить окно относительно его текущего положения на 50px вправо и на 50px вниз</button>
<button onclick="moveWindowBy(-50,0)">Переместить окно относительно его текущего положения на 50px влево</button>
<button onclick="moveWindowBy(50,0)">Переместить окно относительно его текущего положения на 50px вправо</button>
<button onclick="moveWindowBy(0,-50)">Переместить окно относительно его текущего положения на 50px вверх</button>
<button onclick="moveWindowBy(0,50)">Переместить окно относительно его текущего положения на 50px вниз</button>

В JavaScript доступны для изменения размеров окна следующие методы:

  • resizeTo() - изменяет ширину и высоту окна на умазанные значения, заданные с помощью соответствующих значений параметров;
  • resizeBy() - предназначен для изменения окна на указанное количество пикселей относительно его текущего размера.

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

Метод resizeTo() имеет следующий синтаксис:

window.resizeTo(width,height);

Параметры метода:

  • width - устанавливает ширину окна браузера в пикселях;
  • height - устанавливает высоту окна браузера в пикселях.

Метод resizeBy() имеет следующий синтаксис:

window.resizeBy(width,height);

Параметры метода:

  • width - увеличивает или уменьшает ширину окна браузера на указанное количество пикселей;
  • height - увеличивает или уменьшает высоту окна браузера на указанное количество пикселей.

Пример:

<script>
var myWindow;
function openWindow() {
  myWindow = window.open("","","width=200,height=200");
}
function resizeWindowTo() { 
  if (myWindow && !myWindow.closed) { 
    myWindow.resizeTo(300,300);
	myWindow.focus();
  }
}
function resizeWindowBy(x,y) { 
  if (myWindow && !myWindow.closed) { 
    myWindow.resizeBy(x,y);
	myWindow.focus();
  }
}
</script>
...
<button onclick="openWindow()">Открыть окно</button>
<button onclick="resizeWindowTo()">Изменить ширину и высоту окна браузера (300,300)</button>
<button onclick="resizeWindowBy(25,25)">Увеличить ширину и высоту окна браузера на 25px</button>
<button onclick="resizeWindowBy(-25,0)">Уменьшить ширину окна на 25px</button>
<button onclick="resizeWindowBy(25,0)"> Увеличить ширину окна на 25px</button>
<button onclick="resizeWindowBy(0,-25)"> Уменьшить высоту окна на 25px</button>
<button onclick="resizeWindowBy(0,25)"> Увеличить высоту окна на 25px</button>

В JavaScript для прокрутки HTML документа внутри окна доступны следующие методы:

  • scrollTo() - предназначен для прокрутки документа в горизонтальном и вертикальном направлении на указанное количество пикселей;
  • scrollBy() — предназначен для прокрутки документа вверх или вниз и влево или вправо на определённое количество пикселей относительно его текущего положения.

Метод scrollTo() имеет следующий синтаксис:

window.scrollTo(x,у);

Параметры метода:

  • х - координата вдоль оси X, до которой необходимо прокрутить документ в горизонтальном направлении;
  • у - координата вдоль оси Y, до которой необходимо прокрутить документ в вертикальном направлении.

Метод scrollBy() имеет следующий синтаксис:

window.scrollBy(x,y);

Параметры метода:

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

Пример:

<script>
function scrollWindowTo() { 
  window.scrollTo(200,300);
}
function scrollWindowBy(x,y) { 
  window.scrollBy(x,y);
}
</script>
...
<button onclick="scrollWindowTo()">Прокрутить документ по X и Y на 200px и 300рх соответственно</button>
<button onclick="scrollWindowBy(100,0)">Прокрутить документ на 100рх вправо относительно его текущего положения</button>
<button onclick="scrollWindowBy(-100,0)"> Прокрутить документ на 100рх влево относительно его текущего положения </button>
<button onclick="scrollWindowBy(0,50)"> Прокрутить документ на 50рх вниз относительно его текущего положения </button>
<button onclick="scrollWindowBy(0,-50)"> Прокрутить документ на 50рх вверх относительно его текущего положения </button>


   JavaScript и jQuery 0    2817 0

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.