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

174

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

JustGoscha
источник
Не могу найти. может быть, они вставят это позже?
Четтер Хуммин
1
Для тех, кто ищет, как получить исходный код в исходном коде @Pradeep Kumar Prabaharan (он недооценен)
zelusp

Ответы:

261

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

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

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

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

JustGoscha
источник
1
Вот страница с описанием
Ларри
5
Например, http://jsfiddle.net/Ua8Cvесли вы просто наберете extra /showв адресной строке и нажмете клавишу ввода (после чего браузер покажет ярлык исходного кода), чтобы получить исходный код.
heltonbiker
1
Я вижу в исходном коде HTML jsfiddle скрытую кнопку на панели инструментов <a class="aiButton" id="showjscode" title="Show JavaScript code" href="#showjs"><span class="icon-pencil"></span>Show JS</a>. Это ничего не делает, но, возможно, скоро будет
corbacho
4
В 2015 году, после перехода /show, сохраните полную страницу, затем посмотрите в папку, которая заканчивается _files, внутри должен быть .htmlфайл с исходным кодом примера.
Кастро Рой
11
Решающий шаг отсутствует. После того, как jsfiddle.net/Ua8Cv/show выберите javascript, выберите источник просмотра кадра, затем сохраните. Не только источник страницы.
Эрик Бриджер
87

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

Способ 1:

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

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

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

Шаг 2 : Щелкните правой кнопкой мыши нижний фрейм и выберите View Frame Source . Вот и все. Вы получили 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/
Прадип Кумар Прабахаран
источник
2
Спасибо! Шаг 2 не был очевиден для меня.
Крис Принц
на шаге 1 мы получаем дополнительный заголовок со ссылкой «Result» - для той же страницы и ссылкой «edit in jsfiddle» .. следует щелкнуть правой кнопкой мыши на выводе (исключая этот заголовок) и выбрать источник фрейма вида.
Pradeep Kumar Prabaharan
3
Это полный ответ, непонятный из принятого ответа
Эрик Бриджер
@LeosLiterak Я думаю, что вы пытались просмотреть исходный код страницы для method1. Это работает для источника просмотра кадра . Перекрестная проверка с примером ссылки.
Прадип Кумар Прабахаран
@LeosLiterak обновлен. и спасибо за напоминание, так что теперь ответ будет более понятным для любого.
Прадип Кумар Прабахаран
15

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

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

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

Suprido
источник
Вы видели это? Что Resultв шапке?
Маленький инопланетянин
1
Возможно, это когда-то и сработало, но в 2018 году переход по такому URL-адресу без заголовка реферера HTTP «fiddle.jshell.net» дает его встроенный в iframe, такой же, как jsfiddle.net/<fiddle id> / show / или jsfiddle.net / < идентификатор скрипты > / внедрено / результат /
Джейкоб С. говорит восстановить Монику
10

Нет, у 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".

LS
источник
7

По-прежнему не поддерживается загрузка. НО .. вы можете использовать скрипт узла 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
Факундо Виктор
источник
5

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

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

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

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

johirpro
источник
4

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

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

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

ASammour
источник
2

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

Ангшу Гуха
источник
1

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

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

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

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

  3. Наконец, сохраните страницу в выбранном вами формате (MHT, HTML, TXT и т. Д.) И вуаля!

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

Casper
источник
0

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

Например:

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

для поля URL:

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

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

Уджвал Кумар Гупта
источник
Пожалуйста, перестаньте отвечать на вопросы, которые были решены более 2 лет назад, с высоким рейтингом. Это не приносит никакой пользы никому.
Rayryeng
0

Хорошо, самый простой способ, который я обнаружил, это просто изменить URL (jsfiddle [dot] net) на fiddle [dot] jshell [dot] net / У вас есть четкий html-код без какого-либо iframe ... Пример: https: // jsfiddle [точка] net / mfvmoy64 / 27 / show / light / -> http: // fiddle [точка] jshell [точка] net / mfvmoy64 / 27 / show / light /

( Нужно изменить '.' На "[dot]" из-за stackeroverflow ...: c ) PS: sry 4 bad english

lo1c
источник
0

Не существует такого правильного способа загрузить все вещи вместе из JSFiddle, но для этого есть хакерский способ. Просто добавьте «внедренный /» или «внедренный / результат /» в конце вашего URL-адреса JSFiddle !, а затем вы можете сохранить всю страницу в виде файла HTML + внешние библиотеки (если хотите).

Мухаммед Усама Рабани
источник
-2

Используйте http://jsfiddle.net/ / show / light /

тогда просто используйте функцию проверки элементов браузера. Вы получите код на вкладке iframe. , в Chrome просто щелкните правой кнопкой мыши и выберите правку в виде вкладки HTML. и скопируйте содержимое HTML. это ваш настоящий код.

user4924479
источник
-3

Ctrl+ S, сохраняет всю скрипку, внутри папки с файлами находится чистая страница, которую вы ищете

Фернандо Родригес
источник
Эти инструкции слишком расплывчаты.
LS