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

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


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(URL, target, features)
* 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>

домен у страниц должен быть один
Считаю, что этот вариант более удачный по сравнению с модальным окном только на 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

в f t
наверх ↑

12 комментариев:

Космо Мизраил Горыныч
/*O*\ Это волшебно!!! Исчерпывающая статья. Всё, что связано с новыми окнами и ифреймами - всё есть х) даже фулскрин.
Наташа, ты супервумен!!
NMitra
Тема такая огромная, всё взаимосвязано... решила описать самое интересное. Да, что там, в процессе написания сама много интересного узнала.. Вот это вообще вне конкуренции http://habrahabr.ru/post/164539/ (дыру прикрыли).

Про фулскрин сегодня доделывала :))
Анонимный
Скажите пожалуйста, как мне в новое окно, вставить плеер?
NMitra
Вам нужен код плеера, если он у вас есть, то выложите на http://jsfiddle.net/ Тогда смогу что-то предположить.
Анонимный
Здравствуйте ваш сайт просто уникальный все так подробно расписано лучше вашего сайта просто нет теперь только ваш сайт и посещаю.
Много чего взял с вашего сайта,всё что мне было нужно есть у вас на сайте.
Но вот столкнулся с одной проблемой,есть IFRAME вот такого вида:

< di*v align="left"> < i*nput type="button" value="Oткрыть" onclick="frames.IF*rame1.location.href='http://сай.ру'"> (убрать звездочки)

Этот iframe работает только в OPERE 12.17 а вот в других браузерах нет то-есть сама кнопка Открыть не работает она не открывает iframe.
И еще хочу добавить две кнопки обновить и закрыть . Пожалуйста помогите решить эту проблему.
Анонимный
Почему то не весь код вставился я не могу вставить весь код без звездочек вообще не вставляет пишет запрешенный тег
Анонимный
вот весь код
< di*v align="left"> < i*nput type="button" value="Oткрыть" onclick="frames.IF*rame1.location.href='http://сай.ру'">#/di*v##di*v class="fr1"##if*rame id="IF*rame1" frameborder="0" src="/img/frame/1.jpg" scrolling="no"##/if*rame##/di*v# (убрать звездочки и вместо#поставить<> )
NMitra
Здравствуйте.
Для того, чтобы код писать в комментариях, используйте, пожалуйста, http://shpargalkablog.ru/2010/12/napisat-kod-tekstom.html
1 вариант http://jsfiddle.net/NMitra/un0Le1qw/ (предложен тут http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#target )
2 вариант http://jsfiddle.net/NMitra/un0Le1qw/1/

<input type="button" value="Oткрыть" onclick="document.querySelector('#raz').setAttribute('src', 'http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif');">
<iframe id="raz" src=""></iframe>
Анонимный
Cпасибо большое теперь все работает
вот что получилось:
<div align="left">&nbsp;<input type="button" value="Oткрыть" onclick="document.querySelector('#IFrame1').setAttribute('src', 'http://www.другой-сайт.ru ');"><div class="fr1"><iframe id="IFrame1" frameborder="0" scrolling="no" src="http://сайт.ru/img/frame/1.jpg"></iframe></div>
A как теперь добавить к этому фрейму кнопку (Обновить этот фрейм) чтоб не обновлять всю страницу .
NMitra
Если единый домен или есть доступ к другой-сайт.ru то с помощью contentWindow. Мне кажется тут простые наглядные примеры http://shpargalkablog.ru/2014/11/iframe.html
Иначе ещё раз нажмите на кнопку "Открыть". src обновиться и вновь подгрузится фрейм
александр мухтаров
Здравтсвуйте! вот такой вопрос у меня возни если например использую onclick="return !window.open для скрытия внешние ссылки нужно ли её при этом закрывать от индексации и как?
NMitra
Здравствуйте, это всё читается Гуглом (он из исходного кода тянет все URL). Можно страницу закрыть от индексации (а надёжней паролем :)) и на ней перечислить ссылки. А затем их выводить с помощью XMLHttpRequest() http://shpargalkablog.ru/2015/07/xmlhttprequest.html