24.01.2025 07:30
kossyak 2 826 Источник

Основное отличие этой песочницы от других — сжатие и кодирование пользовательского кода непосредственно в 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('?'))

▎Заключение

Этот проект делался по фану и не на что не претендует. Тем не менее, он качественно сделан и хорошо работает. Его вполне можно использовать, если нужно с кем поделиться примером кода.

Комментарии (2)


  1. space2pacman
    24.01.2025 08:17
    #27826402

    Вы лучше напишите как разрабатывали и с какими трудностями сталкивались.


    1. kossyak Автор
      24.01.2025 08:17
      #27826438

      Спасибо за ваш вопрос! Для сжатия использовал библиотеку pako. Код очень простой:

      import pako from 'pako'

function compress(str) {
  const compressed = pako.deflate(str, { to: 'string' })
  return btoa(compressed.reduce((data, byte) => data + String.fromCharCode(byte), ''))
}
function decompress(compressedStr) {
  return pako.inflate(atob(compressedStr).split('').map(char => char.charCodeAt(0)), { to: 'string' })
}
export { compress, decompress }

      Строка с кодом сжимается и кодируется в base-64 и обратно. Проблем особых не было.

      Ссылка на проект https://github.com/kossyak/papakha