Наверно многие знакомы с codepen.io и github.com. Так вот, там есть редакторы кода, и в этой публикации мы сделаем свой редактор кода, с мини браузером!
Его я буду использовать на своём сайте vsevolodhtml.ru, там на нём я буду показывать примеры, которые можно запустить, и изменить для интереса!
Код html и css очень лёгкий, поэтому его я особо объяснять не буду, а начну с js:
Выше конечный код для ленивых, как вы можете видеть здесь всё скудно, но интересно, в textarea у нас начальный код, который будет там в самом начале, после неё идёт придуманный тег browser, он и будет нашим мини-браузером. У всех рабочих частей есть id, чтобы было легче работать через js.
Начнём разбирать js, первые три строки сохраняют в переменные наши рабочие части через id, четвёртая извлекает код из textarea, и тоже сохраняет его в переменную. Потом идёт функция, которая и отвечает за работу мини-браузера. Первая строка берёт наш написанный код, и обновляет переменную. А вторая заполняет кодом наш мини-браузер. И получается что когда мы нажимаем на кнопку "ЗАПУСК", вызывается функция, которую мы сейчас разобрали!