Приднестровская поддержка XOOPS
Метод open() объекта window позволяет открыть дополнительное окно и поместить в него Web-страницу:
[<Переменная> = ]window.open(<URL>, [<Имя окна>], [<Свойства окна>]);
Здесь используются следующие компоненты:
□ <URL> — URL-адрес страницы, которая будет загружена в новое окно;
□ <Имя окна> — имя нового окна;
□ <Свойства окна> — определяет отображаемые элементы в новом окне;
□ <Переменная> — ссылка на объект вновь созданного окна, которую можно использовать для работы с ним.
Свойства окна, передаваемые методу open():
□ width и height задают ширину и высоту создаваемого окна в пикселах (минимум 100);
□ left и top указывают горизонтальную и вертикальную координаты левого верхнего угла создаваемого окна;
□ fullscreen — {yes | no | 1 | 0} — включает (yes или l) или отключает (по или о) полноэкранный режим для создаваемого окна;
□ resizable — {yes | no | 1 | 0} — включает или отключает возможоность изменения размера создаваемого окна;
□ location — {yes | no | 1 | 0} — указывает наличие или отсутствие адресной строки;
□ menubar — {yes | no | 1 | 0} — включает или отключает отображение строки меню;
□ scrollbars — {yes | no | 1 | 0} — задает, отображать или нет полосы прокрутки;
□ status — {yes | no | 1 | 0} — указывает наличие или отстутствие строки состояния;
□ titiebar — {yes | no | 1 | 0} — включает или отключает отображение заголовка у создаваемого окна;
□ toolbar — {yes | no | 1 | 0} — включает или отключает отображение панели инструментов:
□ replace — {yes | no | 1 | 0} — задает режим сохранения адресов в истории: если указано yes или 1, то адрес открываемого документа заменит в списке истории адрес документа, находящегося в текущем окне;
□ channeimode — {yes | no | 1 | 0} — задает режим отображения панели каналов: если указано yes или 1, то создаваемое окно будет отображаться с панелью каналов.
Приведем пример создания нового окна и управления его местоположением и размерами. Создадим два файла: test.html (листинг 46)— страницу, открывающую новое окно, и doc1.html (листинг 47) — открываемый в новом окне документ.
Листинг 46. Содержимое файла test.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Открытие нового окна</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript">
<!--
var myWindow;
function f_open() { // Открываем окно
var str = "menubar=0,location=0,resizable=0,scrollbars=0,";
str += "status=0,titlebar=no,toolbar=0,left=0,";
str += "top=0,width=500,height=500";
myWindow = window.open("doc1.html", "window1", str);
}
function f_close() { // Закрываем окно
var div1 = document.getElementById("div1");
if (!myWindow.closed) {
myWindow.close();
div1.style.display = "none";
}
else {
window.alert("Окно уже было закрыто");
div1.style.display = "none";
}
}
function f_resize() { // Задаем размер окна
var div1 = document.getElementById("div1");
var txt1 = document.getElementById("txt1");
var txt2 = document.getElementById("txt2");
var p = /^[0-9]{3}$/;
if (p.test(txt1.value) && p.test(txt2.value)) {
if (!myWindow.closed) {
myWindow.resizeTo(txt1.value, txt2.value);
}
else {
window.alert("Окно было закрыто раньше");
div1.style.display = "none";
}
}
else {
window.alert("Необходимо ввести число из 3 цифр");
}
}
function f_move() {
// Изменяем местоположение относительно текущего положения окна
var div1 = document.getElementById("div1");
var txt3 = document.getElementById("txt3");
var txt4 = document.getElementById("txt4");
var p = /^\-?[0-9]+$/;
if (p.test(txt3.value) && p.test(txt4.value)) {
if (!myWindow.closed) {
myWindow.moveBy(txt3.value, txt4.value);
}
else {
window.alert("Окно уже было закрыто");
div1.style.display = "none";
}
}
else {
window.alert("Необходимо ввести число");
}
}
//-->
</script>
</head>
<body>
<div>
<input type="button" value="Создать окно" onclick="f_open();"><br>
<div style="display: none" id="div1">
<input type="button" value="Закрыть созданное окно"
onclick="f_close();"><br>
X: <input type="text" id="txt1"><br>
Y: <input type="text" id="txt2"><br>
<input type="button" value="Задать размеры окна"
onclick="f_resize();"><br>
X: +- <input type="text" id="txt3" value="0"><br>
Y: +- <input type="text" id="txt4" value="0"><br>
<input type="button" value="Изменить местоположение окна"
onclick="f_move();">
</div>
</div>
</body>
</html>
Листинг 47. Содержимое файла doc1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Новое окно</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript">
<!--
function f_closed() {
window.close();
}
function f_unload() {
opener.document.getElementById("div1").style.display = "none";
}
function f_load() {
opener.document.getElementById("div1").style.display = "block";
}
//-->
</script>
</head>
<body onunload="f_unload();" onload="f_load();">
<div><h1>Заголовок нового окна</h1>
<input type="button" value="Закрыть окно" onclick="f_closed();">
</div>
</body>
</html>
Откроем в Web-браузере файл test.html и нажмем кнопку Создать окно. В итоге отобразится новое окно и станут доступными дополнительные возможности:
□ кнопка, позволяющая закрыть открытое окно;
□ кнопка Задать размеры окна и два поля, позволяющие задать новый размер открытого окна;
□ кнопка Изменить местоположение окна и два поля, позволяющие задать смещение окна относительно текущего местоположения (может принимать отрицательные значения).
Отправитель | Нити |
---|
8 пользователь(ей) активно (2 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 8 далее... |