Открытие нового окна window.open() или одной страницы внутри другой с помощью iframe | JavaScript

• Открыть окно с помощью window.open
• Скрипт popup, сделанный с помощью iframe
• window.stop();
• Передать данные из одного окна в другое можно и с помощью localstorage и sessionStorage
• Кавычки, косая черта, перевод строки в JavaScript

window.open(URL, target, features)

URL	абсолютный URL. Если отсутствует, то "about:blank"
target	значение target или имя нового окна. По умолчанию '_blank'
features	w3.org рекомендует игнорировать, поэтому обращаемся непосредственно к браузерам mozilla.org, microsoft.com параметр значение описание по умолчанию height число больше 100 высота содержимого окна в px. В Chrome работает только совместно с width. window.innerHeight текущего width число больше 100 ширина содержимого окна в px. В Chrome работает только совместно с height. window.innerWidth текущего left число равно или больше 0 отступ от левого края экрана до левого края открытого окна в px. top число равно или больше 0 отступ от верхнего края экрана до верхнего края открытого окна в px scrollbars yes | no | 1 | 0 наличие полос прокрутки no

* window.open блокируется браузером, если посетитель не совершил каких-то действий, допустим, нажал на кнопку. Это связано с негативным отношением к всплывающей рекламе.

Нажав на ссылку открыть несколько окон

открыть две ссылки одним кликом
открыть ссылку в новом окне, поменять текущую страницу

<a href="http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html" onclick="window.open(this.href); window.open('http://shpargalkablog.ru/p/html-css-javascript.html'); return false;">открыть две ссылки одним кликом</a>

<a href="http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#target" onclick="window.open(this.href, '_self'); window.open('http://shpargalkablog.ru/p/html-css-javascript.html'); return false;">открыть ссылку в новом окне, поменять текущую страницу</a>

return false; нужен чтобы запретить переход по ссылке и выполнить скрипт

Открыть ссылку в новом окне

открыть ссылку в новом окне, а не вкладке

<a href="http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#target" onclick="window.open(this.href, '', 'scrollbars=1'); return false;">открыть ссылку в новом окне, а не вкладке</a>

Открыть окно на весь экран

открыть ссылку в новом окне во весь экран

<a href="http://shpargalkablog.ru/2013/05/get-mouse-coordinates-inside-div.html#size-window" onclick="window.open(this.href, '', 'scrollbars=1,height='+screen.availHeight+',width='+screen.availWidth); return false;">открыть ссылку в новом окне во весь экран</a>

screen.availWidth — ширина экрана монитора минус панель задач
screen.availHeight — высота экрана монитора минус панель задач

открыть текущее окно в полный экран (F11)

<a href="#" onclick="requestFullScreen(document.documentElement); return false;">открыть текущее окно в полный экран (F11)</a>

<script>
function requestFullScreen(element) {
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullscreen;
    if (requestMethod) {
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") { // для IE
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}
</script>

element.requestFullScreen() — развернуть элемент (окно, видео и т.п.) в полноэкранный режим
element.exitFullscreen() — закрыть полноэкранный режим

Открыть окно определённого размера

открыть окно в 500px ширины и высоты, но не более размера экрана монитора

<a href="http://shpargalkablog.ru/2013/05/get-mouse-coordinates-inside-div.html#size-window" onclick="window.open(this.href, '', 'scrollbars=1,height='+Math.min(500, screen.availHeight)+',width='+Math.min(500, screen.availWidth)); return false;">открыть окно в 500px ширины и высоты, но не более размера экрана монитора</a>

Math.min(x1, x2, x3) возвращает меньшее из чисел

Окно по середине экрана монитора

открыть окно по центру экрана монитора

<a href="http://shpargalkablog.ru/2013/05/get-mouse-coordinates-inside-div.html#size-window" 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>

Math.max(x1, x2, x3) возвращает большее из чисел

Окно по середине окна браузера

открыть окно по центру окна браузера

<a href="http://shpargalkablog.ru/2013/05/get-mouse-coordinates-inside-div.html#size-window" onclick="newMyWindow1(this.href); return false;">открыть окно по центру окна браузера</a>

<script>
function newMyWindow1(href) {
  var d = document.documentElement,
      h = 500,
      w = 500,
      myWindow = window.open(href, 'myWindow', 'scrollbars=1,height='+Math.min(h, screen.availHeight)+',width='+Math.min(w, screen.availWidth)+',left='+Math.max(0, ((d.clientWidth - w)/2 + window.screenX))+',top='+Math.max(0, ((d.clientHeight - h)/2 + window.screenY)));

      // абзац для Chrome
      if (myWindow.screenY >= (screen.availHeight - myWindow.outerHeight)) {myWindow.moveTo(myWindow.screenX, (screen.availHeight - myWindow.outerHeight))};
      if (myWindow.screenX >= (screen.availWidth - myWindow.outerWidth)) {myWindow.moveTo((screen.availWidth - myWindow.outerWidth), myWindow.screenY)};

}
</script>

window.outerHeight — высота окна браузера
window.outerWidth — ширина окна браузера
window.innerHeight — высота области просмотра окна браузера
window.innerWidth — ширина области просмотра окна браузера
document.documentElement.clientHeight — высота области просмотра окна браузера без полосы прокрутки
document.documentElement.clientWidth (оно же ) — ширина области просмотра окна браузера без полосы прокрутки
window.screenY — отступ от верхнего края экрана монитора до верхнего края окна браузера (координаты окна браузера относительно экрана монитора)
window.screenX — отступ от левого края экрана монитора до левого края окна браузера (координаты окна браузера относительно экрана монитора)
window.moveTo(x, y) перемещает окно на указанные координаты относительно экрана монитора
window.moveBy(x, y) смещает окно на указанное количество px
window.focus() делает окно активным
window.resizeTo(width,height) изменяет размер окна на указанный (нельзя для текущего)

Новое окно на JavaScript

<button onclick="myWindow()">Открыть</button>

<script>
function myWindow() {
    var w = window.open('', '', 'scrollbars=1');
    w.document.write('<!DOCTYPE html>\n\
<title>Заголовок</title>\n\
<p>Содержание <button onclick="window.close();">Закрыть</button>\n\
<script>\n\
alert("\x27одинарные кавычки в скрипте\x27;");\n\
<\x2fscript>');
}
</script>

window.close() закрывает окно
document.write добавляет код во время загрузки веб-страницы. Его можно заменить на appendChild() или innerHTML

Изменить данные главного окна из открытого

<button onclick="myWindow1()" id="raz">Открыть</button>
<script>
function myWindow1() {
    var myWindow1 = window.open('', 'myWindow1', 'scrollbars=1,height='+Math.min(200, screen.availHeight)+',width='+Math.min(500, screen.availWidth));
    myWindow1.document.write('<!DOCTYPE html>\n\
<title>Заголовок</title>\n\
<p>Содержание <button onclick="myWindow2();">Изменить текст кнопки с "Открыть" на "Нажать"</button>\n\
<scr' + 'ipt>function myWindow2() {window.opener.document.getElementById("raz").innerHTML = "Нажать"; window.close();}</scr' + 'ipt>');
}
</script>

window.opener даёт доступ к родительскому окну, позволяет изменять его элементы, если домены одинаковы. Не обязательно сочетать с window.open, достаточно открыть ссылку с атрибутом target="_blank"

Изменить открываемое окно

<button onclick="myWindow3()">Поменять заголовок, выделить его красным цветом</button>
<script>
function myWindow3() {
  var w = window.open('http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#target', '', 'scrollbars=1');
  w.onload = function() {
    var z = this.document.getElementById("target");
    z.innerHTML = "Заголовок поменяли!!!!";
    z.style.color = "red";
  }
}
</script>

домен у страниц должен быть один

Правильный скрипт popup, сделанный с помощью iframe

Считаю, что этот вариант более удачный по сравнению с модальным окном только на CSS, так как дополнительный HTML подгружается после нажатия на кнопку или другого действия посетителя сайта

Страница родителя
<button onclick="myWindow5(this)">Открыть</button>
<script>
function myWindow5(e) {// создать iframe и добавить его после кнопки
  if (e.nextSibling.nodeName.toLowerCase() != "iframe") {// если после кнопки нет iframe
    var iframe = document.createElement('iframe');
    iframe.setAttribute('src', 'http://shpargalkablog.ru/2014/11/window-opener.html');
    iframe.setAttribute('height', '200');
    e.parentNode.insertBefore(iframe, e.nextSibling);
  }
}
</script>
<style>
iframe[src^="http://shpargalkablog.ru/2014/11/window-opener.html"] { /* какой-то стиль у iframe. Его можно отцентрировать стилями CSS по центру окна браузера, сделать общий фон страницы затуманенным */
  width: 100%;
  border: none;
}
</style>


Вложенная страница, вернее страница, которая будет открыта внутри iframe
<button onclick="myWindow2();">Закрыть</button>
<script>
function myWindow2() {
  var raz = window.parent.document.querySelector('iframe[src^="http://shpargalkablog.ru/2014/11/window-opener.html"]'); // удалить созданный в родителе iframe
  raz.parentNode.removeChild(raz);
}
</script>
<style>
html {
  overflow: hidden; // убрать полосы прокрутки внутри iframe, т.к. атрибут scrolling="no" для iframe в HTML5 не поддерживается
}
</style>

window.parent даёт доступ к ближайшему родительскому окну из iframe или object, позволяет изменять его элементы, если домены одинаковы
window.top даёт доступ к верхнему iframe в иерархии объектов, позволяет изменять его элементы, если домены одинаковы

Изменить содержимое iframe

<button onclick="myWindow4(this)">Заменить фон</button>
<iframe src="http://shpargalkablog.ru/2014/11/window-opener.html#dva" id="raz2"></iframe>
<script>
function myWindow4(e) {
  document.getElementById('raz2').contentWindow.document.getElementById('dva').style.background = 'blue';
}
</script>

iframe.contentWindow позволяет изменять содержимое фрейма, если домены одинаковы. В том числе прокручивать к нужному месту документ в фрейме
postMessage позволяет делать тоже самое и с разными доменами (есть пример использования)

Советую к прочтению: javascript.ru