HTML5 за 10 минут

Извлечение данных из предыстории


Итак, введенные данные сохранены в объекте состояния и помещены в предыстории текущей страницы, откуда они будут извлечены автоматически при перезагрузке текущей страницы. Таким образом, введенные однажды данные могут быть восстановлены из предыстории. Для того чтобы извлечь эти данные из предыстории и отобразить их в окне браузера, необходимо связать событие onpopstate, порождаемое для текущей страницы, с функцией его обработки.

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

2.   Введите выделенный ниже полужирным код для обработки события onpopstate, в результате чего текст, введенный пользователем, будет восстановлен и затем отображен в элементе <div>.

<!DOCTYPE html>

<html>

<head>

<title>

Предыстория просмотра веб-страниц </title>

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

{

window.history.back();

}

function pushData()

{

var statedata = document.getElementById("statedata").value; var containerObject = {container: statedata}; history.pushState(containerObject, "item", "pophistory.html");

}

function popData(event)

{

var state = "Страница: " + document.location + ■

Данные: " + event.state.container; document.getElementById("state").innerHTML = "<hl>" + state + "</hl>";

}?

window.addEventListener("popstate", popData, false);

</script>

</head>

<body onload="loader()">

<Ь1>Предыстория просмотра веб-страниц</Ы>

<input type="button" value="Ha3afl" onclick="back();">

<input type="button" value="Вперед"

onclick="forward();">

<br>

Число перемещаемых страниц: <input id="amount" type="text">

<input type="button" value="Перейти" onclick="go();">

<br>

<br>

<br>

Помещаемый текст: <input id="statedata" type="text">

<input type="button" value="Поместить данные" onclick="pushdata(); ">

<br>

<div id="length"x/div>

<br>

<div id="state"x/div>

<br>

</body>

</html>

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

Если теперь пользователь введет текст на странице HTML-документа pophistory.html, щелкнет на кнопке Поместить данные, перейдет к следующей странице, а затем вернется к странице HTML-документа pophistory.html, то введенный им текст будет автоматически извлечен из предыстории и отображен на данной странице. (На момент написания этой книги отсутствовали какие-либо официальные сведения о поддержке механизма размещения и извлечения данных из предыстории в браузерах. Но как только его поддержка появится в браузерах, вы будете готовы реализовать его на практике.)

Полный исходный код примера HTML-документа pophistory.html

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

<1DOCTYPE html>

<html>

<head>

<title>

Предыстория просмотра веб-страниц </title>

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

{

window.history.back();

}

function forward()

{

window.history.forward();

}

function go()

{

var amount = document.getElementById("amount").value; window.history.go(amount)?

}

function loader()

{

var length = window.history.length; document.getElementById("length").innerHTML = "<hl>" + "Протяженность предыстории: " + length + "</hl>";

}

function pushData()

{

var statedata = document.getElementByld("statedata").value;

var containerObject = {container: statedata};

history.pushState(containerObject, "item", "pophistory.html");

}

function popData(event)

{

var state = "Страница: " + document.location + " Данные: " + event.state.container; document.getElementByld("state").innerHTML = "<hl>" + state + "</hl>";

};

window.addEventListenerCpopstate", popData, false);

</script>

</head>

<body onload="loader()">

<Ь1>Предыстория просмотра веб-страниц</Ь1>

<input type="button" value="Назад" onclick="back();">

<input type="button" value="Вперед" onelick="forward();">

<br>

<br>

Число перемещаемых страниц: <input id="amount" type="text">

<input type="button" value="Перейти" onclick="go();"> <br>

<br>

<br>

Помещаемый текст: <input id="statedata" type="text">

<input type="button" value="Поместить данные" onclick="pushdata();">

<br>

<div id="length"></div>

<br>

<div id="state"></div>

<br>

</body>

</html>

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