Есть ли функция загрузки в jsFiddle? - PullRequest
Новая
       5

Есть ли функция загрузки в jsFiddle?

160 голосов
/ 24 марта 2012

Есть ли функция загрузки в jsFiddle, чтобы вы могли загружать HTML с CSS, HTML и JS в одном файле, чтобы вы могли запускать его без jsFiddle для целей отладки?

Ответы [ 15 ]

244 голосов
/ 26 марта 2012

Хорошо, я узнал:

Вы должны поставить /show a после URL, над которым вы работаете:
/show/">http://jsfiddle.net//show/
Это сайт, который показывает результаты.

А потом при сохранении в виде файла. Это все в одном HTML-файле.

Например:
http://jsfiddle.net/Ua8Cv/show/
для сайта http://jsfiddle.net/Ua8Cv

79 голосов
/ 19 апреля 2015

Новый ответ на старый вопрос:

Метод 1:

Шаг 1 : Вы должны поставить /show после URL, над которым вы работаете: 

http://jsfiddle.net/<fiddle_id>/show/

Показывает вывод с заголовком результата.

Шаг 2 : щелкните правой кнопкой мыши нижнюю рамку и выберите Просмотреть источник кадра . Вот и все. Вы получили HTML-код с онлайн-ссылками JS, CSS.

Просто сохраните его.

Например: http://jsfiddle.net/YRafQ/20/show/ для сайта http://jsfiddle.net/YRafQ/20/

Примечание: Просмотр кадра источника , а не Просмотр страницы источника

Метод 2:

Вы можете использовать этот код: view-source:http://fiddle.jshell.net/<fiddle_id>/show/light/

Например: для моего fiddle_id: YRafQ/20

view-source:http://fiddle.jshell.net/YRafQ/20/show/light/
15 голосов
/ 02 января 2015

Добавление / шоу не представляет чистый исходный код, это встроенный рабочий пример. Чтобы отобразить его без каких-либо дополнительных сценариев, CSS и HTML, используйте: 

http://fiddle.jshell.net/<fiddle id>/show/light/

Пример: http://fiddle.jshell.net/Ua8Cv/show/light/

10 голосов
/ 16 декабря 2015

Нет, JSFiddle не имеет функции загрузки.Тем не менее, не так уж и сложно обойти это и сохранить содержимое скрипки в любом случае.

Со времени публикации принятого ответа JSFiddle внесла некоторые последние изменения в пользовательский интерфейс и бэкэнд, которые влияют на то, как скрипта должна работать.быть загруженнымОбратите внимание на обновленные процедуры, приведенные ниже.

Простой метод командной строки

Этот метод загружает только HTML, JavaScript и CSS скрипта в виде одного файла.Внешние ресурсы скрипки не сохраняются.

В командной строке, показанной ниже, fiddle_id относится к идентификационному номеру скрипты.Для скрипки с URL "http://jsfiddle.net/<fiddle_user>/<fiddle_id>" или "http://jsfiddle.net/<fiddle_id>" требуется только fiddle_id.fiddle_user не имеет значения.

В командной строке введите единственную командную строку: 

fiddleId=fiddle_id; curl "http://fiddle.jshell.net/${fiddleId}/show/" -H "Referer: http://fiddle.jshell.net/${fiddleId}/" --output "${fiddleId}.html"

Скрипка будет сохранена в файл с именем "fiddle_id.html".

Более длинный метод браузера

Этот метод загружает скрипку и ее внешние ресурсы.Приведенные шаги основаны на использовании Google Chrome.Использование других веб-браузеров также должно работать, но они могут использовать разные имена файлов.

  1. Выберите меню / ссылку "Share/Embed" вверху страницы редактирования JSFiddle.В открывшемся диалоговом окне скопируйте URL-адрес, указанный в поле «Share full screen result».Он будет иметь вид "http://jsfiddle.net/<fiddle_user>/<fiddle_id>/embedded/result/" или "http://jsfiddle.net/<fiddle_id>/embedded/result/".
  2. Откройте новое окно браузера и вставьте URL-адрес, скопированный на предыдущем шаге.Загрузите эту страницу.
  3. Используйте функцию сохранения вашего браузера, чтобы сохранить страницу и все ее ресурсы на локальном компьютере.Например, чтобы сохранить все ресурсы с помощью Google Chrome, выберите «Webpage, Complete» в меню «Format».Обязательно укажите имя для страницы.Допустим, в этом примере он называется "fiddle.html".
  4. После сохранения страницы на вашем компьютере у вас будет файл "fiddle.html" и каталог с именем "fiddle_files".Файл "fiddle.html" - это страница-обертка, которую JSFiddle использует для отображения заголовка с заголовком "Результат" и других ссылок.Он загрузит вашу скрипку в элемент iframe.По большей части этот файл можно игнорировать или даже удалить.Содержимое вашей скрипки в формате HTML, JavaScript и CSS будет сохранено в каталоге "fiddle_files" в виде одного файла с именем "saved_resource.html".
  5. Скопируйте "fiddle_files/saved_resource.html" туда, куда вам нужноиспользовать это.Если ваша скрипка содержит элементы в «External Resources», они также появятся в каталоге «fiddle_files».Обязательно скопируйте эти файлы в то же место, куда вы скопировали «saved_resource.html», поскольку файл HTML будет ссылаться на эти ресурсы с использованием относительных URL-адресов.

Как упоминалось ранее, другие браузеры могут называтьфайлы по-разному, когда они сохранены.Например, Firefox называет объединенный файл HTML / JS / CSS "fiddle_files/a.html".

7 голосов
/ 18 мая 2016

Функциональность загрузки по-прежнему не поддерживается .. НО .. вы можете использовать jsfiddle-downloader скрипт узла.

Установка : 

npm install jsfiddle-downloader -g

Чтобы загрузить одиночную скрипку с ее идентификатора : 

jsfiddle-downloader -i <fiddle-id> [-o <output file>]

Чтобы загрузить одиночную скрипку с ее URL : 

jsfiddle-downloader -l <url> [-o <output file>]
jsfiddle-downloader -l jsfiddle.net/<user>/<fiddle-id>
jsfiddle-downloader -l https://jsfiddle.net/<fiddle-id>
jsfiddle-downloader -l https://jsfiddle.net/<user>/<fiddle-id>/show/ -o myfiddle.html

Для загрузки всех сценариев определенного «пользователя» из jsFiddle.net:

jsfiddle-downloader -u <user> [-o <output file>]

Он будет загружать все резервные копии в текущем каталоге, сценарии jsFiddles будут называться как: 

[<output-folder>/]<id-fiddle>.html
4 голосов
/ 07 марта 2017

Лучший способ это:

  1. Щелкните правой кнопкой мыши на панели вывода.
  2. Выберите источник просмотра кадра, тогда появится весь код.

После этого вы можете скопировать этот код и вставить его на свой компьютер.

3 голосов
/ 03 декабря 2018

Шаг 1:
Перейти на страницу скрипки, как jsfiddle.net/oskar/v5893p61

Шаг 2:
Добавьте '/ show' в конце URL, например jsfiddle.net/oskar/v5893p61/show

Шаг 3:
Щелкните правой кнопкой мыши на странице и выберите Просмотр кадра источника . Вы получите код HTML, включающий CSS в теге и Javascript (js) в теге. Также будет добавлена ​​ссылка на источник для всей библиотеки. См. Скриншот

Шаг 4:
Теперь вы можете сохранить исходный код в файле .html.

2 голосов
/ 25 декабря 2014

Вы должны поставить / показать после URL, над которым вы работаете:

Например: 

"http://jsfiddle.net/rkw79/PagTJ/show/"

для поля URL: 

"http://jsfiddle.net/rkw79/PagTJ/"

после этого сохраните файл и перейдите в папку show (или имя файла, с которым вы сохранили) в этой папке. Вы получите html-файл show_resource.HTML. Это ваш фактический файл. Теперь откройте его в браузере и просмотрите исходный код. Удачи -------- Уджвал Гупта

1 голос
/ 11 октября 2016

Я нашел статью под вышеуказанной темой. Таким образом, я мог взять полный код. Я упомяну это.

Вот шаги, упомянутые в статье:

  1. Добавьте внедренный / result / в конце URL-адреса JSFiddle, который вы хотите получить.

  2. Показать кадр или исходный код кадра: щелкните правой кнопкой мыши в любом месте страницы ипросмотреть фрейм на новой вкладке или в источнике сразу (требуется Firefox).

  3. Наконец, сохраните страницу в предпочитаемом формате (MHT, HTML, TXT и т. д.) ивуаля!

и вы можете найти его: https://sirusdark.wordpress.com/2014/04/10/how-to-save-and-download-jsfiddle-code/

1 голос
/ 18 марта 2015

В недавней работе мне пришлось скачать список URL скриптов и создать отдельную папку для каждой скрипки, имеющую отдельный файл html css js для каждого, для этого я создал следующую программу для сканирования.https://github.com/sguha-work/FiddleCrawler. Он создаст имя папки со значением счетчика, и каждая папка будет иметь HTML, CSS, JS и файл сведений.(Файл сведений содержит ссылки на внешние ресурсы).

Страница:
...