HTML5 за 10 минут

Полный исходный код HTML-страницы parent.html


Ниже для справки приводится полностью исходный код HTML-страницы parent. html из рассмотренного в этой главе примера межоконного обмена сообщениями.

<!DOCTYPE html>

<html>

<head>

<title>

Межоконный обмен сообщениями </title>

<script type="text/javascript"> function send()

{

var message = document.getElementById("message").value; var location = window.location; var protocol = location.protocol; var host = location.host;

document.getElementById("iframe").contentWindow.postMessage (message, protocol + "//" + host);

}

</script>

</head>

<body>

<Ы>Межоконный обмен сообщениями</Ь1>

<iframe id="iframe" src="child.html"

height="300" width="600">

</iframe>

<br>

<br>

Отправляемое сообщение: <input id="message" type="text">

<input type="button" onclick="send();" уа1ие="0тправить">

</body>

</html>

Полный исходный код HTML- страницы child.html

Ниже для справки приводится полностью исходный код HTML- страницы child.html из рассмотренного в этой главе примера межоконного обмена сообщениями.

<!DOCTYPE html>

<html>

<head>

<title>

Порожденная страница </title>

<script type="text/javascript"> window.addEventListener("message", loader, false); function loader(e)

{

document.getElementByld("messages").innerHTML = e.data;

}

</script>

</head>

<body>

<div id="messages" style="width:400px; height:250px"></div>

</body>

</html>

Создание страницы domainparent.html для примера междоменного обмена сообщениями

Рассмотрим пример организации междоменного обмена сообщениями. Для того чтобы приступить к созданию HTML-стра- ницы parent.html из примера междоменного обмена сообщениями, выполните следующие действия.

1.   Создайте HTML-документ domainparent.html в любом редакторе текста, например в Windows WordPad.

2.   Введите приведенный ниже код основного тела HTML-документа.

<!DOCTYPE html>

<html>

<head>

<title>

Междоменный обмен сообщениями </title>

</head>

<body>

<Ь1>Междоменный обмен сообщениями</Ь1>

</body>

</html>

3.   Введите выделенный ниже полужирным код для создания элемента <iframe>, используемого в данном примере для отображения содержимого второй страницы domainchild.html, а также текстовое поле для ввода отправляемого сообщения и кнопки Отравить, связываемой с функцией send(), для отправки введенного сообщения. (Замените домен www.domain.com
в приведенном ниже коде тем доменом, в котором вы собираетесь хранить страницу domainchild.html.)

<!DOCTYPE html>

<html>

<head>

<title>

Междоменный обмен сообщениями </title>

</head>

<body>

<Ь1>Междоменный обмен сообщениями hi >

<iframe id="iframe"

src=11 http: / / wvw. domain. соя/domainchi Id. html11 height="300e width="600">

</iframe>

<br>

<br>

Отправляемое сообщение: <input id="message" type"text">

<input type="button" onclick="send();" value=■Отправить■>

</body>

</html>

4.   Сохраните внесенные изменения в файле domainparent.html. Непременно сделайте это в текстовом формате. По умолчанию в текстовом редакторе WordPad выбирается расширенный текстовый формат RTF, непригодный для браузеров.

Итак, начало созданию HTML-страницы domainparent.html положено. Теперь нужно организовать отправку с нее сообщений на вторую HTML-страницу.

Комментарии закрыты