Как встроить код HTML и CSS во фрейм
Вы когда-нибудь пользовались сервисом, подобным JSBin? На нем можно написать код HTML, CSS и JavaScript, и тут же увидеть результат своих действий на специальной панели. В данном уроке мы сделаем страницу с элементом iframe, которая будет выполнять почти такие же действия (за исключением реализации JavaScript кода).
Шаг 1. Создаем структуру HTML разметки
Разметка будет состоять из двух частей. Первая часть содержит форму с двумя полями, в которые будет вводиться непосредственно текст кода HTML и CSS. Во второй части содержится фрейм, в котором будет выводиться результат. Для частей используются собственные классы для визуального оформления и общий класс grid для формирования структуры страницы.
<!doctype html> <html> <head> <title></title> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container grid"> <form> <h2>HTML</h2> <textarea id="html"></textarea> <h2>CSS</h2> <textarea id="css"></textarea> </form> </div> <div class="output grid"> <iframe></iframe> </div> </body> </html>
Шаг 2. Задаем стили CSS для наших элементов
Выполняем простой сброс свойств CSS:
* { margin: 0; padding: 0; }
Задаем определенный шрифт, который будет использоваться на странице. Также выравниваем части страницы. Они будут располагаться рядом друг с другом. Для формирования лучшего внешнего вида установим отступы, а чтобы отступы не увеличивали ширину элементов воспользуемся режимом вывода элементов, устанавливаемым значением border-box:
body { font-family: sans-serif; } .grid { width: 50%; float: left; padding: 30px 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Снимем вывод рамки для фрейма, растянем его на всю доступную ширину. Для элементов ввода текста наоборот установим рамки, а также добавим поля для лучшего визуального восприятия. С помощью рамки добавим разделитель между контейнерами формы и фрейма.
.container { background: #e3e3e3; border-right: 1px solid white; } .output { border-left: 1px solid #e3e3e3; } textarea { width: 100%; height: 200px; margin-top: 20px; margin-bottom: 50px; } iframe { border: none; width: 100%; }
Шаг 3. Добавляем функционал
С помощью jQuery очень просто реализовать функционал, который нам требуется. Организуем функцию, чтобы выполнять все операции в локальном контексте. определяем три локальных переменных. В первой хранится контекст фрейма, вторая предназначена для организации места вставка HTML кода, а третья - для CSS кода, который будет вставляться в разделе head страницы, выводимой во фрейме. А затем создаем обработчик события нажатия клавиши в области ввода текста. Так как их у нас две, то нужно производить определение, куда вводится текст, и добавлять введенный текст в соответствующий раздел страницы, выводимой во фрейме.
(function() { var contents = $('iframe').contents(), body = contents.find('body'), styleTag = $('<style></style>').appendTo(contents.find('head')); $('textarea').keyup(function() { var $this = $(this); if ( $this.attr('id') === 'html') { body.html( $this.val() ); } else { // Наверно, вводится CSS код styleTag.text( $this.val() ); }); })();
Кроме того, нужно добавить код, который будет выравнивать по высоте две части нашей страницы, чтобы она выглядела достойно.
$('.grid').height( $(window).height() );
Примечание: обязательно включите код jQuery в страницу, чтобы функционал действовал.