Обмен параметров между окнами

Довольно часто возникает задача передачи некоторых параметров от открывающего окна открываемому окну и/или передача параметров из открываемого окна открывшему его окну.

В Web-браузерах можно использовать два способа такого обмена:

· с помощью метода showModalDialog() объекта window (не работает в Opera);

· с помощью свойства opener объекта window (этот способ работает во всех Web-браузерах).

Метод

showModalDialog(URL, аргументы, опции)

открывает модальное диалоговое окно (модальным называется окно, до закрытия которого нельзя продолжить работу на компьютере). Функция возвращает значение, заданное в диалоговом окне в свойстве returnValue объекта window.

Параметр URL задает адрес загружаемого диалогового окна. В необязательном параметре аргументы задаются данные, передаваемые диалоговому окну. Параметр аргументы, заданный при вызове диалогового окна, доступен в диалоговом окне в свойстве dialogArguments объекта window. Необязательный параметр опции задает строку списка характеристик диалогового окна (отдельные характеристики списка отделяются друг от друга символом ";").

Для диалогового окна могут быть заданы следующие характеристики:

· dialogwidth: ширина – задает ширину диалогового окна (в абсолютных или относительных единицах);

· dialogheight: высота – задает высоту диалогового окна (в абсолютных или относительных единицах);

· dialogleft: расстояние – задает расстояние от левого края экрана до левого края диалогового окна (в абсолютных или относительных единицах);

· dialogtop: расстояние – задает расстояние от верхнего края экрана до верхнего края диалогового окна (в абсолютных или относительных единицах);

· center:yes или center:no – включает или отключает вывод диалогового окна в центре экрана (по умолчанию yes);

· scroll:yes или scroll:no – включает или отключает отображение полос прокрутки диалогового окна (по умолчанию no);

· resizable:yes или resizable:no – включает или отключает возможность изменения размера диалогового окна (по умолчанию no).

Пример 4.5.55. Использование диалогового окна:

Тело документа HTML содержит следующую кнопку:

<input type="button" value="Выполнить тест"

onclick="openTest()">

Функция openTest() задает параметры для диалогового окна, открывает диалоговое окно, а затем выполняет обработку результата, полученного от диалогового окна:

function openTest()

{

// Задание массива параметров теста

var testParms = new Array();

// Задание вопроса теста

testParms[0] = 'Какие атрибуты элемента <a>' +

' задают метку ("якорь") для элемента HTML?';

// Задание вариантов ответа теста

testParms[1] = "id";

testParms[2] = "href";

testParms[3] = "name";

// Вызов диалогового окна

var answer = window.showModalDialog('testBox.html',

testParms,

"dialogwidth: 500px; dialogheight: 250px; scroll: no");

//Если ответ правильный

if(answer == "truefalsetrue")

// Вывод сообщения о правильном ответе

document.write("<p style='color:green'>" +

"Правильный ответ</p>");

else

// Вывод сообщения о неправильном ответе

document.write("<p style='color:red'>" +

"Ответ неправильный</p>");

// Закрытие документа

document.close();

}

В теле документа HTML диалогового окна формируется вопрос теста и варианты ответа, а также содержится кнопка для формирования результата и возврата в вызывающее окно:

// Получение строкового представления параметров

testString = new String(window.dialogArguments);

// Преобразование строки в массив

testParms = testString.split(",");

// Вывод вопроса теста

document.write("<h4>" + testParms[0] + "</h4><form>");

// Вывод вариантов ответа в цикле

for(i = 1; i < testParms.length; i++)

// Вывод текущего варианта ответа

document.write("<p><input type='checkbox' id='id" + i +

"' value='" + testParms[i] + "'/><label for='id" +

i + "'>" + testParms[i] + "</label></p>");

// Вывод конечного тега формы

document.write("</form>");

</script>

<input type="button" value="Проверка"

onclick="testClose()">

Функция формирует строку результата для передачи вызывающему окну и закрывает диалоговое окно:

function testClose()

{

// Начальное значение возвращаемой строки

testResult = "";

// Получение состояния переключателей в цикле

for(i = 1; i < testParms.length; i++)

{

// Получение состояния текущего переключателя

testResult += document.getElementById("id" +

i).checked

}

// Получение возвращаемого значения

window.returnValue = testResult;

// Закрытие окна

window.close();

}

После нажатия кнопки Выполнить тест открывается диалоговое окно, затем после ответа на вопрос и нажатия кнопки Проверка диалоговое окно закрывается и вызывающем окне выводится результат теста:

В новой Web-странице доступ к элементам открывшего его окна (для чтения или изменения) можно выполнить, если перед элементом Web-страницы открывшего окна задать свойство opener объекта window.

Пример 4.5.56. Использование свойства opener:

Тело документа HTML для ввода фамилии пользователя, вызова окна ввода login и пароля пользователя и вывода значений login и пароля имеет следующий вид:

<form>

<table>

<tr>

<td>Введите свою фамилию:</td>

<td><input type="text" id="userName"

value=""></td>

</tr>

<td><input type="button"

onclick="openAccessWindow()"

value="Ввод login и пароля"></td>

</tr>

<tr>

<td>Ваш login:</td>

<td><input type="text"

id="userLogin" value=""></td>

</tr>

<tr>

<td>Ваш пароль:</td>

<td><input type="text"

id="userPass" value=""></td>

</tr>

</table>

</form>

Функция открытия нового окна для ввода значений login и пароля имеет следующий вид:

function openAccessWindow()

{

// Проверка ввода фамилии

if (document.getElementById("userName").value == "")

alert("Не введена фамилия");

else // Если фамилия введена

{

// Задание ширины и высоты нового окна

winWidth = 400;

winHeight = 300;

// Определение координат x и y левого

// верхнего угла окна для того, чтобы

// окно было выведено в центре экрана

winLeft = (screen.availWidth - winWidth) / 2;

winTop = (screen.availHeight - winHeight) / 2;

// Задание свойств конфигурации окна

winProps = "height=" + winHeight + ", width=" +

winWidth + ", top=" + winTop + ", left=" +

winLeft + ", screenX=" + winTop +

", screenY=" + winLeft;

// Открытие нового окна для

// ввода login и пароля

accessWin=

window.open("accessBox.html",

"accessWindow", winProps);

}

Тело документа HTML для ввода login и пароля пользователя имеет следующий вид:

<h3>Здравствуйте, <span id="userName"

style="color:green">пользователь</span>!</h3>

<form>

<table>

<tr>

<td>Введите login:</td>

<td><input type="text"

id="userLogin" value=""></td>

</tr>

<tr>

<td>Введите пароль:</td>

<td><input type="password"

id="userPass" value=""></td>

</tr>

<tr>

<td colspan="2"><input type="button"

onclick="doClose()" value="Возврат"></td>

</tr>

</table>

</form>

В элементе задан вызов функции openerParms()при загрузке Web-страницы:

Эта функция получает фамилию пользователя из открывающего окна

function openerParms()

{

try

{

document.getElementById

("userName").firstChild.nodeValue =

window.opener.document.getElementById

("userName").value;

}

catch(Error) // Если ошибка при получении фамилии

{

alert("Вызывающее окно закрыто");

}

Функция doClose() заносит значения login и пароля в соответствующие текстовые поля открывающего окна, а затем закрывает текущее окно:

function doClose()

{

// Если login и/или пароль не введены

if (document.getElementById("userLogin").value == "" ||

document.getElementById("userPass").value == "")

// Вывод сообщения

alert("Не введен login и/или пароль");

else

{

try

{

// Передача login пользователя

// в вызывающее окно

window.opener.document.getElementById

("userLogin").value =

document.getElementById

("userLogin").value;

// Передача пароля пользователя

// в вызывающее окно

window.opener.document.getElementById

("userPass").value =

document.getElementById

("userPass").value;

// Закрытие окна

window.close();

}

// Если ошибка при передаче login и пароля

catch(Error)

{

alert("Вызывающее окно закрыто");

}

В первой Web-странице вводится фамилия пользователя, а затем нажимается кнопка Ввод login и пароля. После ввода значений login и пароля и нажатия кнопки Возврат во второй Web-странице в первой Web-странице в текстовых полях выводятся значения login и пароля пользователя: