2.8 Новые окна через функцию
В предыдущем примере мы открывали окно с помощью команды window.open. Окно заполнялось другим документом HTML, который мы указывали в скобках.
Сейчас мы попробуем создать функцию, которая откроет новое окно, причем и новое окно, и все его содержимое будет вписано в тот же документ HTML. То есть в буквальном смысле слова мы вложим две страницы в одну.
Это делает скрипт
<SCRIPT type="text/javascript"> function openindex() { var OpenWindow=window.open("", "newwin", "height=300,width=300"); OpenWindow.document.write("<HTML>") OpenWindow.document.write("<TITLE>Новое окно</TITLE>") OpenWindow.document.write("<BODY BGCOLOR='white'>") OpenWindow.document.write("<CENTER>") OpenWindow.document.write("<font size=+1>Новое окно</font><P>") OpenWindow.document.write("<a href= 'http://newmail.ru' target='main window'> Эта ссылка<BR>откроется в главном окне</a><p>") OpenWindow.document.write("<P><HR><P>") OpenWindow.document.write("<a href='' onClick='self.close()'> Эта закроет окно</a><p>") OpenWindow.document.write("</CENTER>") OpenWindow.document.write("</HTML>") self.name="main window" } </SCRIPT>
...и в строке BODY:
onLoad="openindex()"
Помните, текст в скобках должен находиться на одной строке.
Главная часть скрипта, содержащая функцию, помещается между командами <HEAD> и </HEAD>, как большинство функций.
По самой обычной схеме функция получает имя openindex(). Теперь подходим к основному моменту. Создаем переменную OpenWindow, под которой скрывается команда window.open(). Вот так:
var OpenWindow=window.open("", "newwin", "height=300,width=300');
Так же было в прошлом примере. Единственная разница в том, что вы не указываете URL. Видите пустые парные кавычки? Они говорят браузеру, что он должен искать информацию о новом окне. То же самое, что и не ставить URL в ссылку, которая закрывает окно. Оно бы не закрылось, если бы начала загружаться новая страница. Точно так же и тут. Браузер стал бы загружать новую страницу, а не выполнять скрипт.
Теперь начинаем писать страницу HTML, которая будет внутри нового окна. Вот первая строка текста:
OpenWindow.document.write("<HTML>")
Переменная OpenWindow (то есть новое окно) говорит, что этот текст должен быть вписан в документ.
Взгляните на скрипт. Каждая новая строка следует той же схеме. Можно написать сотню строк, создающих законченную страницу.
Помните: когда вы пишете HTML внутри команды document.write, вместо двойных кавычек с подкомандами ставьте одинарные. Иначе будут проблемы.
Наконец командой onLoad в строке BODY запускается функция.
Рассмотренный выше скрипт, к которому добавлен скрипт, вызывающий то же окно с помощью кнопки, приведен в примере 2.10, а результат выполнения на рис. 2.10.
|
Пример 2.10. Открытие нового окна через функцию |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Открытие нового окна</TITLE> <SCRIPT type="text/javascript"> function openindex() { var OpenWindow=window.open("", "newwin", "height=300,width=300"); OpenWindow.document.write("<HTML>") OpenWindow.document.write("<TITLE>Новое окно</TITLE>") OpenWindow.document.write("<BODY BGCOLOR='white'>") OpenWindow.document.write("<CENTER>") OpenWindow.document.write("<font size=+1>Новое окно</font><P>") OpenWindow.document.write("<a href= 'http://newmail.ru' target='main window'> Эта ссылка<BR>откроется в главном окне</a><p>") OpenWindow.document.write("<P><HR><P>") OpenWindow.document.write("<a href='' onClick='self.close()'> Эта закроет окно</a><p>") OpenWindow.document.write("</CENTER>") OpenWindow.document.write("</HTML>") self.name="main window" } </SCRIPT> </HEAD> <BODY onLoad="openindex()"> <FORM><INPUT onclick=openindex() type=button value="Новое окно"> </FORM> </BODY> </HTML>
|
