Как встроить код HTML и CSS во фрейм

Вы когда-нибудь пользовались сервисом, подобным JSBin? На нем можно написать код HTML, CSS и JavaScript, и тут же увидеть результат своих действий на специальной панели. В данном уроке мы сделаем страницу с элементом iframe, которая будет выполнять почти такие же действия (за исключением реализации JavaScript кода). 

Шаг 1. Создаем структуру HTML разметки

Разметка будет состоять из двух частей. Первая часть содержит форму с двумя полями, в которые будет вводиться непосредственно текст кода HTML и CSS. Во второй части содержится фрейм, в котором будет выводиться результат. Для частей используются собственные классы для визуального оформления и общий класс grid для формирования структуры страницы.

Code
<!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:

Code
* {
  margin: 0;
  padding: 0; }


Задаем определяем шрифт, который будет использоваться на странице. Также выравниваем части страницы. Они будут располагаться рядом друг с другом. Для формирования лучшего внешнего вида установим отступы, а чтобы отступы не увеличивали ширину элементов воспользуемся режимом вывода элементов, устанавливаемым значением border-box:

Code
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; }


Cнимем вывод рамки для фрейма, растянем его на всю доступную ширину. Для элементов ввода текста наоборот установим рамки, а также добавим поля для лучшего визуального восприятия. С помощью рамки добавим разделитель между контейнерами формы и фрейма.

Code
.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 страницы, выводимой во фрейме. А затем создаем обработчик события нажатия клавиши в области ввода текста. Так как их у нас две, то нужно производить определение, куда вводится текст, и добавлять введенный текст в соответствующий раздел страницы, выводимой во фрейме.

Code
(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() );
   
  });

})();


Кроме того, нужно добавить код, который будет выравнивать по высоте две части нашей страницы, чтобы она выглядела достойно.

Code
$('.grid').height( $(window).height() );


Примечание: обязательно включите код jQuery в страницу, чтобы функционал действовал.

  • FalleN

  • 3927

  • 1

  • 263

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!