Динамическое создание временных окон

В JavaScript предусмотрены простые и удобные средства для работы с окнами браузера. В частности, JavaScript позволяет отображать временные окна с вспомогательной информацией, не оправдывающей создания и загрузки отдельной страницы. Напрашивается очевидная идея — построить универсальный шаблон, который будет использоваться для всех временных окон. Все, что для этого потребуется, — РНР. В листинге 15.4 показано, как файл РНР window.php вызывается из JavaScript. В этом файле реализован очень простой шаблон с директивой INCLUDE для включения файла, идентификатор которого передается window.php при вызове из JavaScript.

Для читателей, не имеющих опыта программирования на JavaScript, я включил в программу подробные комментарии. Значение переменной winld, передаваемой сценарию РНР window.php, задается внутри ссылки в основном коде HTML. Когда пользователь щелкает на ссылке, вызывается функция newWindow( ), определенная в JavaScript. Чтобы вы лучше поняли, как это происходит, рассмотрим следующую ссылку:

<а href="#" onClick="newWindow(1):">Contact us</a><br>

Как видите, я просто включаю в href значение "#", поскольку ссылка генерируется обработчиком события onClick в JavaScript. Установка обработчика приводит к тому, что при щелчке на ссылке вызывается функция newWindow( ). Обратите внимание на параметр, передаваемый при вызове этой функции (в приведенном примере — 1). Содержащийся в нем идентификатор используется сценарием РНР для выбора отображаемой информации. Вы можете передать любое число — при условии, что оно соответствует имени файла, отображаемого в сценарии РНР. Внимательно просмотрите листинг 15.4. Чтобы вам было легче ориентироваться, я создал три простых файла *.inc, соответствующих ссылкам в этом листинге.

Листинг 15.4. Динамическое построение временных окон

<html>

<head>

<title>Listing 15-4</title>

// Объявить переменную Javascript

var popWindow;

// Объявить функцию newWindow

function newWindow(winID)

{

// Объявить переменную winURL. Присвоить ей

// имя файла РНР с последующими данными.

var winURL = "Listingl5-5.php?winID=" + winID;

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

// открыть его.

if (! popWindow | popWindow.closed) {

// Открыть новое окно шириной 200 пикселов и высотой

// 300 пикселов, расположенное на расстоянии 150 пикселов

// от левого края и 100 пикселов от верхнего края

// основного окна.

popWindow = window.open(winURL. 'popWindow',

dependent.width=200.height=300.left=150 ,top=100');

}

// Если временное окно уже открыто.

// активизировать его и обновить содержимое

// в соответствии с winURL.

else {

popWindow.focus();

popWindow.location = winURL;

}

//-->

</SCRIPT>

</head>

<a href="#" onClick="newWindow(1);">Contact Us</a><br>

<a href="#" onClick="newWindow(2):">Driving Directions</a><br>

<a href="#" onClick="newWindow(3);">Weather Report</a><br>

</body>

</html>

Когда пользователь щелкает на одной из ссылок в листинге 15.4, программа создает временное окно и загружает в него содержимое, полученное в результате вызова window.php. Сценарию window.php передается переменная winID, по которой определяется файл, включаемый в сценарий РНР. Сценарий window.php приведен в листинге 15.5.

Листинг 15.5. Сценарий window.php

<html>

<head>

<title>Popup Window Fun</title>

</head>

<tr>

<td>

// Включить файл, имя которого определяется

// переданным параметром.

INCLUDE("$winID.inc");

</td>

</tr>

<tr>

<td>

<a href="#" onClick="parent.self.closet);

">close window</a>

</td>

</tr>

</table>

</body>

</html>

Остается лишь создать файлы для ссылок в листинге 15.4. Поскольку в ссылках передаются три уникальных идентификатора (1, 2 и 3), мы должны создать три файла. Первый файл, содержащий контактную информацию, сохраняется с именем Line:

<td>

<h4>Contact Us</h4>

<li>email: <a href="mailto:wj@wjgilmore.com">wj@wjgilmore.com</a> <li>phone: (555) 867 5309 <li>mobile: (555) 555 5555 </ul> </td>

</tr> </table>

Следующий файл (местонахождение) сохраняется с именем 2.inс.

<table>

<tr>

<td>

<h4>Driving Directions</h4>

<ol>

<li>Turn left on 1st avenue.

<li>Enter the old Grant building.

<li>Take elevator to 4th floor.

<li>We're in room 444.

</td>

</tr>

</table>

Последний файл (сводка погоды) сохраняется с именем 3.inc. Обратите внимание на вызов функции РНР, возвращающей текущую дату, — этот пример наглядно показывает, как легко РНР интегрируется с JavaScript: ,

<table>

<tr>

<td>

<h4>Weather Report <?=date("m-d-Y");?></h4>

<b>Today:</b> Birr... Brisk, with blowing and drifting snow.<br><br>

<b>Tonight:</b> Winter Weather Advisory. 7-10 inches snow expected.

</td>

</tr>

</table>

На рис. 15.1 показано, как выглядит временное окно, открываемое по третьей ссылке.

Рис. 15.1. Сводка погоды во временном окне

Наше короткое знакомство с интеграцией PHP/JavaScript подходит к концу. Мы рассмотрели несколько простых, но вполне реальных примеров, которые при желании легко адаптируются для более сложных целей. При объединении РНР с JavaScript или любой другой технологией, ориентированной на работу на стороне сервера, необходимо правильно определить возможности браузера, чтобы предотвратить случайные ошибки. Всегда полезно поэкспериментировать с другими технологиями, интегрируемыми с кодом РНР; только проследите за тем, чтобы не отпугнуть пользователей от сайта недоступными возможностями или содержанием, которое невозможно просмотреть.

Следующий раздел посвящен СОМ — еще одной технологии, с которой легко работать средствами РНР.

Содержание раздела