Минималистичная JavaScript песочница

Основное отличие этой песочницы от других — сжатие и кодирование пользовательского кода непосредственно в URL. Код не хранится на сервере или где-либо ещё. Если у вас есть ссылка, значит у вас есть код.

Может возникнуть вопрос, сколько символов можно записать в URL и как много кода таким образом можно закодировать? У разных браузеров максимальная длина URL-строки отличается. Но 2000 символов поддерживают все современные браузеры. В такую строку можно закодировать довольно много кода, причем степень сжатия увеличивается с объёмом кода.

Ссылка на проект

▎Интерфейс

Интерфейс состоит из двух секций: редактора JavaScript-кода и iframe, позволяющего взаимодействовать со страницей с помощью этого кода. Отсутствуют отдельные секции для HTML и CSS. Песочница предназначена преимущественно для JavaScript. Однако HTML и CSS-код можно легко добавить на страницу, используя свойство innerHTML и глобальный объект document. С помощью этого свойства можно добавить и стили, обернув их в тег <style>.

▎Пример кода

В этом примере подключается библиотека jQuery для добавления обработчика клика на кнопку. HTML-код добавлен с помощью нативного свойства innerHTML.

import "https://code.jquery.com/jquery-3.5.1.min.js"

document.body.innerHTML = '<button id="btn">Click Me!!!</button>'

$('#btn').click(() => alert('