Расположение окна
【1】 Получите
Браузер (Firefox не поддерживает) обеспечивает свойства screenLeft и screenTop , которые используются для представления положения окна относительно левой и верхней стороны экрана соответственно.
Когда окно максимизируется, значения, возвращаемые каждым браузером, не одинаковы при запуске следующего кода. Chrome возвращает влево: 0; Top: 0. IE возвращает влево: 0; Top: 56 (если есть панель меню, он возвращается влево: 0; Top: 78), потому что IE сохраняет расстояние от левой и верхней стороны экрана в видимую область страницы, представленной объектом Window. Safari возвращается влево: -8; Top: -8 из-за собственной ошибки
// Перемещение окна, будет изменение значения <div id = 'mydiv'> </div> <script> var timer = setInterval (function () {mydiv.innerhtml = 'left:' + window.screenleft + '; op:' + window.screentop;}) myDiv.onclick = function () {clearnterval (time);Результат: слева: 0; верх: 93
Свойства screenX и screenY (IE8-) также предоставляют ту же информацию о положении окна.
[Примечание] screenLeft , screenTop , screenX и screenY -все это свойства только для чтения. Изменение их значений не приведет к движению окна.
Когда окно максимизируется, значения, возвращаемые каждым браузером, все еще разные. Firefox возвращается влево: -7; Top: -7. Chrome все еще возвращается влево: 0; Top: 0. IE9+ всегда возвращается влево: -7; Top: -7 независимо от того, отображается ли строка меню или нет. Safari все еще возвращается влево: -8; Top: -8 из-за своей собственной ошибки
<div id = 'mydiv'> </div> <script> var timer = setInterval (function () {mydiv.innerhtml = 'слева:' + window.screenx + '; top:' + window.screeny;}) mydiv.onclick = function () {clearInterval (timer);Результат: слева: 0; верх: 93
совместимый
Совместимый метод написания для получения местоположения окна выглядит следующим образом
[Примечание] Из-за различных реализаций каждого браузера невозможно получить точное значение координаты в условиях поперечного браузера.
var LeatsPos = (typeOf window.screenleft == "номер")? window.screenleft: window.screenx; var toppos = (typeof window.screentop == "номер")? window.screentop: window.screeny; console.log (Leathpos, Toppos);
【2】 Мобильный
Используйте методы moveTo() и moveBy() для перемещения окна в новое место. Эти два метода поддерживаются только браузером IE.
moveTo() получает два параметра, а именно значения координат x и y новой позиции
<div id = "mydiv"> нажмите здесь </div> <script> // переместить окно в (0,0) mydiv.onclick = function () {window.moveto (0,100); } </script> moveBy() получает два параметра, а именно количество пикселей, движущихся в горизонтальных и вертикальных направлениях.
<div id = "mydiv"> нажмите здесь </div> <script> // переместить окно на 100 пикселей mydiv.onclick = function () {window.moveby (0,100); } </script>Размер окна
【1】 Получите
Свойства outerWidth и outerHeight используются для представления размера самого окна браузера.
[Примечание] IE8-Browser не поддерживает
// chrome возвращает верхнюю трубочку: 1920; OuterHeight: 1030 // IE9 + и Firefox return OuterWidth: 1550; OuterHeight: 838 // Safari Возвращает Overwidth: 1552; OuterHeight: 840document.innerHtml = 'outterwidth:' + windowThter. window.outerheight: ' + window.outerheight
Результат: OUTERWIDTH: 1440; OuterHeight: 743
Свойства innerWidth и innerHeight используются для представления размера страницы, который фактически равен размеру окна браузера минус ширину собственных границ браузера и решетки меню, адресные стержни, полосы состояния и т. Д.
[Примечание] Поскольку <iframe> сама также обладает свойствами окон, если на странице есть кадр, то свойства innerWidth и innerHeight innerHeight кадре относятся к innerWidth самой кадры.
// chrome возвращает внутреннюю труппу: 1920; Innerheight: 971 // IE9+ возвращает внутреннюю труптку: 1536; Innerheight: 768 // Firefox возвращает внутреннюю труптку: 1536; Innerheight: 755 // Safari возвращает Innerhidth: 1536; Innerheight: 764docly.mody.mody.modocumpt. 'innerwidth:' + window.innerwidth + '; innerheight:' + window.innerheight: ' + window.innerheight
Результат: внутренняя трубка: 701; Innerheight: 40
document.documentElement.clientWidth и document.documentElement.clientHeight в DOM также может представлять размер страницы, возвращая то же значение, что и innerWidth и innerHeight
[Примечание] Точно так же, если к структуре доступна доступ, эти два свойства также указывают на свойства структуры.
// Chrome возвращает внутреннюю труптку: 1920; InnerHeight: 971 // IE9+ возвращает внутреннюю трупу: 1536; InnerHeight: 768 // Firefox возвращает внутреннюю трупту: 1536; InnerHeight: 755 // Safari возвращает внутреннюю пропускную способность: 1536; InnerHeight: 764 Document.body.innerhtml = 'clientWidth:' + document.documentelement.clientWidth + '; clientHeight:' + document.documentelement.clientHeight
Результат: клиентская Whidth: 701; ClientHeight: 40
Хотя эти два типа атрибутов представляют одно и то же значение на компьютере, они имеют различное использование на мобильной стороне. innerWidth и innerHeight представляют визуальный вид просмотра, то есть область веб -сайта, которую видит пользователь; document.documentElement.clientWidth и clientHeight представляют собой порт макета, ссылаясь на размер макета CSS.
【2】 Регулировка
Используйте два метода resizeTo() и resizeBy() для изменения размера окна браузера
[Примечание] Только IE и поддержка браузеров Safari
resizeTo() получает два параметра: новая ширина и новая высота окна браузера
<div id = "mydiv"> нажмите здесь </div> <script> mydiv.onclick = function () {// изменять размер окна браузера до 200,200 window.resizeto (200,200);} </script> resizeBy() получает два параметра: разница между шириной и высотой нового окна браузера и исходным окном
<div id = "mydiv"> нажмите здесь </div> <script> mydiv.onclick = function () {// уменьшить ширину окна браузера на 100 window.resizeby (-100,0);} </script>Откройте окно
Метод window.open() может перейти к определенному URL или открыть новое окно браузера. Этот метод получает 4 параметра: URL для загрузки, цель окна, строка функции и логический характер, указывающий, заменяет ли новая страница страницу загруженной в настоящее время в истории браузера.
параметр
【1】 Часто нужно пройти только первый параметр, и открытие по умолчанию в новом окне
<div id = "mydiv"> нажмите здесь </div> <script> mydiv.onclick = function () {window.open ("http://baidu.com");} </script>【2】 Второй параметр указывает имя существующего окна или структуры, или метод открытия _self, _parent, _top, _blank и т. Д.
<div id = "mydiv"> нажмите здесь </div> <script> // Открыть mydiv.onclick = function () {window.open ("http://baidu.com", '_ self');} </script>【3】 Третий параметр представляет собой строку, разделенную запятыми, указывающая, какие функции отображаются в новом окне.
<div id = "mydiv"> нажмите здесь </div> <script> mydiv.onclick = function () {// открыть веб -страницу QQ с высотой 500, ширина 500, вертикальная координата 0, горизонтальная координата 200 в новой window.open ("http://qq.com", "_blank", "Высота = 500, ширина = 500, top = 0, left = 200")} </script>[4] Четвертый параметр полезен только в том случае, если второй параметр назвал окно, которое существует. Это логическое значение, которое заявляет, что URL -адрес, указанный первым параметром
Возвращаемое значение
Возвращаемое значение метода open() - это объект окна нового окна
<div id = "mydiv"> нажмите здесь </div> <script> mydiv.onclick = function () {var w = window.open (); w.document.body.innerhtml = 'test text';} </script>Недавно созданный объект Window имеет свойство для открытия, которое содержит исходный объект Window, который его открыл
<div id = "mydiv"> нажмите здесь </div> <script> mydiv.onclick = function () {var w = window.open (); console.log (w.opener === window); // true} </script>фильтр
Большинство браузеров имеют системы всплывающих фильтров. Как правило, метод open() вызывается только тогда, когда пользователь вручную нажимает кнопку или ссылку. Код JavaScript обычно терпит неудачу при попытке открыть всплывающее окно, когда браузер изначально загружается. При перехвате, возвращаемое значение undefined
<div id = "mydiv"> нажмите здесь </div> <script> var w = window.open (); console.log (w); // не определенное </script>
Окно закрывается
Так же, как метод open() открывает новое окно, метод close() закрывает окно. Если объект Window был создан, вы можете использовать следующий код, чтобы выключить его
<div> <span id = "span1"> открытое окно </span> <span id = "span2"> window </span> </div> <script> var w; span1.onclick = function () {w = window.open ();} span2.onclick = function () {if (w) {w.close (); }} </script> Объект W в новом окне также имеет closed свойство, чтобы определить, закрыт ли он.
<div id = "mydiv"> нажмите здесь </div> <script> // Сначала показать false, затем trueydiv.onclick = function () {var w = window.open (); console.log (w.closed); // false settimeout (function () {w.close (); console.log (w.closed); // true}, 1000); } </script>Небольшое приложение
Объект возвращается window.open() может управлять открытием и закрытием недавно открытого окна
<div id = "mydiv"> открытое окно </div> <script> var w = null; mydiv.onclick = function () {// Если w не существует, то есть, то нет нового окна, или новое окно закрыто, если (! w) {w = window.open ("http://baidu.com", "_blank", "height = 400, width = 400, top = 10, слева = 10"); mydiv.innerhtml = 'close window'; // Если w существует, это означает, что новое окно открыто} else {w.close (); w = null; mydiv.innerhtml = 'Open Window'; }} </script>Суммировать
В этой статье в основном представлены основные операции Windows браузера JavaScript. Это очень просто для понимания, но очень практичные функции. Я надеюсь, что это будет полезно для каждого ежедневного использования JavaScript.