- Открыть окно с помощью window.open
- Скрипт popup, сделанный с помощью iframe
- window.stop();
- Передать данные из одного окна в другое можно и с помощью localstorage и sessionStorage
- Кавычки, косая черта, перевод строки в JavaScript
URL | абсолютный URL. Если отсутствует, то "about:blank "
| ||||||||||||||||||||||||
target | значение target или имя нового окна. По умолчанию '_blank' | ||||||||||||||||||||||||
features | w3.org рекомендует игнорировать, поэтому обращаемся непосредственно к браузерам mozilla.org, microsoft.com
|
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>открыть текущее окно в полный экран (F11)screen.availWidth
— ширина экрана монитора минус панель задачscreen.availHeight
— высота экрана монитора минус панель задач
<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)
смещает окно на указанное количество pxwindow.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
12 комментариев:
Наташа, ты супервумен!!
Про фулскрин сегодня доделывала :))
Много чего взял с вашего сайта,всё что мне было нужно есть у вас на сайте.
Но вот столкнулся с одной проблемой,есть 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# (убрать звездочки и вместо#поставить<> )
Для того, чтобы код писать в комментариях, используйте, пожалуйста, 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>
вот что получилось:
<div align="left"> <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 как теперь добавить к этому фрейму кнопку (Обновить этот фрейм) чтоб не обновлять всю страницу .
Иначе ещё раз нажмите на кнопку "Открыть". src обновиться и вновь подгрузится фрейм