HTML5 за 10 минут

Ввод кнопок в HTML-документ editiframe.html


В этом задании вам предстоит ввести кнопки в созданный ранее пример HTML-документа editiframe.html. А поскольку эти кнопки выполняют те же функции, что и в примере HTML-документа editdiv.html, их назначение и код создания не требуют каких-то дополнительных пояснений.

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

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

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

<!DOCTYPE html>

<html>

<head>

<title>

Редактируемый элемент &lt;iframe&gt;

</title>

<script type="text/javascript"> var iframe; function loader()

{

iframe = document.getElementById("content"); iframe.contentDocument.designMode = "on";

}

function showSource()

{

var content = iframe.contentDocument.body.innerHTML; content.replace(/</g, &lt;); content.replace(/>/g, &gt;); alert(content);

}

function createLink()

{

var url = prompt("Введите веб-адрес:", "http://"); if (url)

iframe.contentDocument.execCommand("createlink", false, url);

}

window.addEventListener("loader", onload, false);

</script>

</head>

<body onload="loader()">

<hlРедактируемый элемент &lt;iframe&gt;</hl>

<div>

<input type="button" value="I" onclick=

"iframe.contentDocument.execCommand(bold, false, null);">

<input type="button" value="K" onclick=

"iframe.contentDocument.execCommand(italic, false, null);">

<input type="button" value="4"

onclick=

"iframe. contentDocument.execCommand(underline, false, null);">

<input type="button" уа1ие="Добавить ссылку" onclick="createLink();">

<input type="button" уа1ие="Показать исходный текст" onclick="showSource();">

</div>

<iframe id="content" style-border:solid black; height: ЗООрх; width: 500px src="about:blank">

</iframe>

</body>

</html>

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

На этом создание примера HTML-документа editiframe.html завершается. Внешне он практически ничем не отличается от примера HTML-документа editdiv.html, как показано на 5.8. Но в данном примере пользователю предоставляется возможность править весь документ в элементе <if rame>.

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