8 янв. 2013 г.

JavaScript: Как открыть окно не больше видимой части экрана

Задача: с помощью JavaScript открыть окно браузера так, чтоб его размеры не выходили за видимую область экрана.

Решение: открыть окно с помощью JS очень просто. Для этого достаточно вызвать функцию window.open() с нужными параметрами. Вроде ничего сложного: если стандартные размеры окна больше, чем размер экрана, уменьшаем их. А само окно центрируем на экране.

Вот только есть здесь несколько подводных камней. Во-первых, параметры функции window.open, отвечающие за размер окна, задают его внутренний размер без учета размеров заголовка, тулбаров, скролбаров и т.п. Во-вторых, есть слабодокументированные параметры outerWidth и outerHeight, но они не работают в IE. В-третьих, при попытке установить размеры только что открытого окна с помощью его свойств outerWidth и outerHeight, можно нарваться на политику безопасности эксплорера.

Решение все-таки есть, и (по браузерным меркам) довольно элегантное. Функция window.resizeTo() в IE позволяет задать внешние габариты окна.

Таким образом, наш код превращается в:

// Задаем максимальные размеры окна
var w = 1000;
var h = 700;


// Если размеры окна больше рабочей области экрана, уменьшаем их соответственно.
if (w > screen.availWidth) w = screen.availWidth;
if (h > screen.availHeight) h = screen.availHeight;


// Высчитываем координаты, чтобы центрировать окно на экране.
var left = (screen.availWidth - w) / 2;
var top = (screen.availHeight - h) / 2;
 

// Параметры окна
WindowFeatures = 'position=absolute top=' + top + 'px left=' + left + 'px scrolling=no menubar=no resizable=yes scrollbars=yes status=no toolbar=no';

// Открываем окно и сразу устанавливаем внешние размеры.

window.open(path, 'MyPopup', WindowFeatures).resizeTo(w, h);

Комментариев нет:

Отправить комментарий