Редактор HTML+CSS+JS в стиле JSfiddle, код которого состоит из 230 символов

    Хотя неделя 30-строчников закончилась, рискну привести ещё один пример сверхлаконичного кода JavaScript, который я нашёл в сети. Встречайте четырёхпанельный редактор HTML/CSS/JS, с превью в реальном времени, код которого умещается в 230 символов:

    <x id=e><script>for(i=4;i--;)e.innerHTML+=(i?'<textarea id=t'+i:'<iframe')+' style=width:49%;height:48% oninput=\'e.lastChild.src="data:text/html;base64,"+btoa(t3[v="value"]+"<script>"+t1[v]+"<\/script><style>"+t2[v])\'>'</script>
    

    Посмотреть демо можно по этой ссылке. А можно просто вставить вот этот текст с кодом в адресную строку браузера:

    data:text/html,%20<x%20id=e><script>for(i=4;i--;)e.innerHTML+=(i?'<textarea%20id=t'+i:'<iframe')+'%20style=width:49%;height:48%%20oninput=\'e.lastChild.src="data:text/html;base64,"+btoa(t3[v="value"]+"<script>"+t1[v]+"<\/script><style>"+t2[v])\'>'</script>
    


    Логика работы скрипта довольно проста — в цикле создаются три элемента textarea и один iframe, причём переменная цикла используется в качестве флага для переключения между созданием textarea и iframe. Затем на событие oninput вешается добавление текста из трех текстовых областей в соответствующие части документа во фрейме.

    Если вдруг кто-то пропустил, вот ещё пара примеров креативного использования JavaScript и встроенных возможностей браузеров, которые были опубликованы на Хабре:



    Нордавинд
    Company
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 16

      +8
      Спасибо, что не 30.
        +1
        30 я бы не рискнул, всех достало уже )))
          +1
          Вы бы победили =)
          301.6 символов
            0
            Если что, автор не я, мне чужой славы не нужно. Там не демо-сайте есть ссылки на профили людей, которые это соорудили.
              +7
              Что же вы не рискнули указать в статье «Такие-то ребята сделали такую-то штуку, а я просто скопипастил на хабру»?
                +2
                Поправил топик, чтобы никому больше не пришло в голову, что автор кода — я. Так лучше?
        +1
        Дэвид Блэйн
          +2
          Исполнять код после ввода каждого символа — плохая идея.
          Если пользователь начинает набирать for (var i = 0; i < 10; i++), то обычно сначала набирают for(), потом var i = 0; i < 10; — и вот тут всё повиснет.
            0
            как я понимаю, это можно «исправить», заменив onkeyup/oninput на onchange
            +20
            Можно ли вставить код этого редактора в этот же редактор?
              +13
              Дальше первого раза не получается.
              Картинка
              image
                +13
                Странно, но у меня получилось 5 раз. Просто дальше довольно трудно попасть в поле ввода HTML кода.
                Скриншот
                image
                  0
                  > странно
                  Читер. Я-то думал, в каком это браузере у вас lastChild не возвращает пустой style. А тут, оказывается, код другой.
                  upd: в оригинале код тоже уже другой
                    +2
                    Получилось 10 раз.
                    Делал тут: xem.github.io/miniCodeEditor/cross-browser.html
                    Вставлял слегка модифицированный код:
                    <textarea id=H></textarea><textarea id=C></textarea><textarea id=J></textarea><iframe id=I></iframe><script>onload=(d=document).onkeyup=function(){(D=d.getElementById("I").contentWindow.document).write(H[v="value"]+"<script>"+J[v]+"<\/script><style>"+C[v]);D.close()}</script><style>* * *{width:100%;height:48%
                    

                    Десятый раз вставил, но 11 редактор не отобразился, а так можно было бы долго вставлять =)
                    Скрин
                    image

                    P.S. Браузер FireFox 25.0.1
                    0
                    script и html надо раздельно вставлять. И в поле скрипт вставлять без тега script.
                  0
                  Незакрытый textarea ломает стили и код :) Надо в другом порядке добавлять всё это в поле результата…

                  Only users with full accounts can post comments. Log in, please.