Пишу html/css/js песочницу для будущих курсов по веб- разработки. Как с помощью JQuery связать div и iframe?

Question

[krll-k]

Пишу html/css/js песочницу для будущих курсов по веб- разработке.


Index.html:

<div id="lesson">
  <h2>Introduction [1/20]</h2>
  <hr>
  <h3>Lesson </h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum consequatur odit tempora nulla quasi voluptatibus veritatis sapiente reiciendis aperiam recusandae sit esse illo at beatae error? Voluptas sint doloremque numquam?</p>
  <hr>
  <h3>Exercise</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione unde ipsam cum modi sapiente minima culpa quis perspiciatis. Temporibus facere ea ipsam eos tempora autem esse aperiam eveniet hic alias!</p>
</div>
<div id="input">
  <div contenteditable="true" id="js"></div>
  <div contenteditable="true" id="css"></div>
  <div contenteditable="true" id="html">
    &lt;h1&gt;Lorem&lt;/h1&gt;<br>
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt accusamus quisquam aliquam laboriosam iure neque ab aliquid enim magni totam quasi beatae, rerum nam itaque, praesentium fuga, ullam corporis possimus!&lt;/p&gt;
  </div>
</div>
<button id="check">Check!</button>
<iframe id="output" src="" frameborder="0"></iframe>

style.css:

#input, #lesson, #output{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}
#input{

}
#lesson, #html, #css, #js{
  width: 25.25%;
  height:65%;
  float: right;
  margin: 0 -.25% 0 0;
  background: rgba(1,1,1,.1);
}
#check{
  position:absolute;
  top:65%;
  width: 25%;
  margin-left:-7px;
  height: 35%;
  font-size:41px;
}
#output{
  width: 75%;
  height: 35%;
  top:65%;
  margin-left:25%;
}

script.js:

$(document).ready(function(){
  $("#check").click(function(){
      data = $('div#html').contents();
      $('iframe#output').contents().find('body').append(data);
    });
});

Как с помощью JQuery связать контент div'a и iframe? Почему после события click содержимое div испаряется? Использую событие click, но хочу отказаться от него.

Answer 1

[Андрей Ежгуров]

Содержимое не испаряется, а переносится. DOM-элемент не может быть одновременно в нескольких местах. Потому, когда ты делаешь append, происходит перемещение элемента из старого места в новое. Это не имеет никакого отношения к событию click.

Сначала элемент необходимо клонировать (для чего в jQuery есть метод clone), а уже созданный клонированием новый элемент вставлять.

И возьми за правило явно объявлять все локальные переменные посредством слова var - чтобы не выискивать потом по несколько часов причины непонятных глюков.

Comments

[krll-k]

@eandr_67 codepen.io/ndsdmfwg/pen/GatDx - как сделать чтоб по нажатию Check! содержимое обновлялось, а не добавлялось?

[Ден Тоцкий]

поменять .append(); на .html();

[krll-k]

@xDen спасибо ;))

[krll-k]

@xDen почитаю api документацию, чтобы знать в другой раз :)))

Answer 2

[Евгений Петров]

Если вы собираетесь учить людей веб-разработке, то такие простейшие вещи должны знать. Хотя бы разобраться, как это сделано в десятках работающих сайтов типа codepen или jsfiddle.

Comments

[evnuh]

Ну и фундаментально - зачем городить свой велосипед? Может быть проще сразу людей научить работать на нормальными инструментами, с которыми им всё равно придётся столкнуться? Я про codepen jsfiddle sqlfiddle и т.д.

[Павел Волынцев]

@Petroveg А может быть это задание на курсовую в универе? Какая нибудь типа обучающая система с авто-контролем результатов. Там всё пытаются найти золотые самородки путём процеживания дождя через сито. Я имею в виду - ждут, когда зелёных абсолютно неопытных программистов настигнет озарение и они создадут НЕЧТО, превосходящее по возможностям существующие аналоги, но очень простое и при этом бесплатное решение. Я сомневаюсь в подобном подходе.

Лучше бы студентов отправляли на оплаченную стажировку в команду, которая занимается нужными университету программными продуктами. Чтобы в итоге была бы публикация, дипломная работа и возможно этот продукт применили бы в университете.

Это исключительно моё ни на чём не основанное умозаключение. Просто хотелось высказаться.

@krll-k Вы не меня внимания не обращайте. Решайте свою задачу.