BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

Сегодня я расскажу, как открыть новое окно браузера определенного размера с помощью 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>

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

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

Получай обновления блога!!! Подпишись:

Популярные статьи:

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716