высота содержимого окна в 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 — высота экрана монитора минус панель задач
<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() — закрыть полноэкранный режим
<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="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 позволяет делать тоже самое и с разными доменами (есть пример использования)
0 коммент.:
Отправить комментарий