Главная » Вебмастеру » Открытие нового окна window.open() с помощью JavaScript

Открытие нового окна window.open() с помощью JavaScript

2015-08-01 / Вр:13:02 / просмотров: 9912

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

Давайте рассмотрим один из примеров:

<button onclick="window.open('http://адрес сайта или страницы','имя_окна','top=15, left=20, width=400, height=300')">Кнопка</button>

Параметры:

http://адрес сайта или страницы – здесь предельно ясно;

имя_окна – это имя, которое вы присваиваете новому окну. Внимание! В названии можно использовать латинские буквы, цифры и знак «_»;

top – отступы открываемого окна от верхнего края экрана;

left – отступы открываемого окна от левого края экрана;

width - ширина открываемого окна.

height - высота открываемого окна.

Итак, вот пару примеров с готовым кодом:

в виде ссылки:

<a href="#" onclick="window.open('http://stepkinblog.ru/','newwin','top=15, left=20,width=400, height=300')">Кнопка</a>

в виде кнопки

<button onclick="window.open('/','newwin1','top=15, left=20,width=600, height=400')">Кнопка</button>

Результат:

Как открыть новое окно посредине экрана монитора

<a href="/wp-content/lessons/obratnaya-svaz/1/kontakt.html" onclick="newMyWindow(this.href); return false;">открыть окно по центру </a>

<script>
function newMyWindow(e) {
  var h = 500,
      w = 500;
  window.open(e, '', 'scrollbars=1,height='+Math.min(h, screen.availHeight)+',width='+Math.min(w, screen.availWidth)+',left='+Math.max(0, (screen.availWidth - w)/2)+',top='+Math.max(0, (screen.availHeight - h)/2));
}
</script>

Результат:

открыть окно по центру

Вот еще один способ открытия нового окна:

<a href="#" onclick="newMyWindo(this.href); return false;">открыть</a>

<script>
function newMyWindo(e) {
var newWin = window.open("about:blank", "hello", "width=400,height=200");
newWin.document.write("Привет!");
}
</script>

Результат:
открыть