ГЛАВА 15. JavaScript и COM

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

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

Для читателей, не имеющих опыта программирования на JavaScript, я включил в программу подробные комментарии. Значение переменной winID, передаваемой сценарию РНР 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>
<SCRIPT language="Javascript">

// Объявить переменную 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>
<body bgcolor="#ffffff" text="#000000" link="#808040"'vlink="#808040" alink="#808040">
<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>
<body bgcolor="#ffffff" text="#000000" link="black" vlink="gray" alink="#808040">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<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>
<table> <tr>
<li>email: <a href="mailto.html: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 или любой другой технологией, ориентированной на работу на стороне сервера, необходимо правильно определить возможности браузера, чтобы предотвратить случайные ошибки. Всегда полезно поэкспериментировать с другими технологиями, интегрируемыми с кодом РНР; только проследите за тем, чтобы не отпугнуть пользователей от сайта недоступными возможностями или содержанием, которое невозможно просмотреть.

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

Назад | Содержание раздела | Общее Содержание | Вперед

Если Вы не нашли что искали, то рекомендую воспользоваться поиском по сайту: