Есть ли функция загрузки в jsFiddle, чтобы вы могли загружать HTML с CSS, HTML и JS в одном файле, чтобы вы могли запускать его без jsFiddle для целей отладки?
Например, 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.
на шаге 1 мы получаем дополнительный заголовок со ссылкой «Result» - для той же страницы и ссылкой «edit in jsfiddle» .. следует щелкнуть правой кнопкой мыши на выводе (исключая этот заголовок) и выбрать источник фрейма вида.
Pradeep Kumar Prabaharan
3
Это полный ответ, непонятный из принятого ответа
Эрик Бриджер
@LeosLiterak Я думаю, что вы пытались просмотреть исходный код страницы для method1. Это работает для источника просмотра кадра . Перекрестная проверка с примером ссылки.
Прадип Кумар Прабахаран
@LeosLiterak обновлен. и спасибо за напоминание, так что теперь ответ будет более понятным для любого.
Прадип Кумар Прабахаран
15
Добавление / шоу не представляет чистый исходный код, это встроенный рабочий пример. Чтобы отобразить его без каких-либо дополнительных сценариев, CSS и HTML, используйте:
Возможно, это когда-то и сработало, но в 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неважно.
Скрипка будет сохранена в файл с именем " fiddle_id.html".
Более длинный метод браузера
Этот метод загружает скрипку, а также ее внешние ресурсы. Приведенные шаги основаны на использовании Google Chrome. Использование других веб-браузеров также должно работать, но они могут использовать разные имена файлов.
Выберите Share/Embedменю или ссылку "" вверху страницы редактирования JSFiddle. В появившемся диалоговом окне скопируйте URL-адрес, указанный в поле « Share full screen result». Это будет иметь форму " http://jsfiddle.net/<fiddle_user>/<fiddle_id>/embedded/result/" или " http://jsfiddle.net/<fiddle_id>/embedded/result/".
Откройте новое окно браузера и вставьте URL-адрес, скопированный на предыдущем шаге. Загрузите эту страницу.
Используйте функцию сохранения вашего браузера, чтобы сохранить страницу и все ее ресурсы на локальном компьютере. Например, чтобы сохранить все ресурсы с помощью Google Chrome, выберите « Webpage, Complete» в Formatменю « ». Обязательно укажите имя для страницы. Допустим, это называется " fiddle.html" для этого примера.
После сохранения страницы на вашем компьютере у вас будет " fiddle.html" файл и каталог с именем " fiddle_files". Файл " fiddle.html" - это страница оболочки, которую JSFiddle использует для отображения заголовка с заголовком "Результат" и других ссылок. Он загрузит вашу скрипку в элемент iframe. По большей части этот файл можно игнорировать или даже удалить. Содержимое HTML, JavaScript и CSS вашей скрипки будет сохранено в fiddle_filesкаталоге " " как один файл с именем " saved_resource.html".
Скопируйте " fiddle_files/saved_resource.html" туда, где вы хотите его использовать. Если ваша скрипка содержит элементы в разделе " External Resources", они также появятся в fiddle_filesкаталоге " ". Обязательно скопируйте эти файлы в то же место, куда вы скопировали " saved_resource.html", поскольку файл HTML будет ссылаться на эти ресурсы с использованием относительных URL-адресов.
Как упоминалось ранее, другие браузеры могут по-разному называть файлы при их сохранении. Например, Firefox называет объединенный файл HTML / JS / CSS " fiddle_files/a.html".
Шаг 1:
Перейти на страницу скрипки, какjsfiddle.net/oskar/v5893p61
Шаг 2:
Добавьте «/ show» в конце URL, напримерjsfiddle.net/oskar/v5893p61/show
Шаг 3:
Щелкните правой кнопкой мыши на странице и выберите источник фрейма «Просмотр» . Вы получите код HTML, включая CSS в теге и Javascript (js) в теге. Также будет добавлена ссылка на источник для всей библиотеки.
Посмотреть скриншот
Шаг 4:
Теперь вы можете сохранить исходный код в файле .html.
В недавней работе мне пришлось скачать список URL скриптов и создать отдельную папку для каждой скрипки, имеющую отдельный файл html css js для каждого, для этого я создал следующую программу-сканер.
https://github.com/sguha-work/FiddleCrawler.
Он создаст имя папки со значением счетчика, и каждая папка будет иметь HTML, CSS, JS и файл сведений. (Подробный файл будет содержать ссылки на внешние ресурсы).
Я нашел статью под вышеупомянутой темой. Там я мог взять полный код. Я упомяну это.
Вот шаги, упомянутые в статье:
Добавьте внедренный / result / в конце URL-адреса JSFiddle, который вы хотите получить.
Показать фрейм или исходный код фрейма: щелкните правой кнопкой мыши в любом месте страницы и сразу же просмотрите фрейм на новой вкладке или в источнике (требуется Firefox).
Наконец, сохраните страницу в выбранном вами формате (MHT, HTML, TXT и т. Д.) И вуаля!
Вы должны поставить / показать после URL, над которым вы работаете:
Например:
"http://jsfiddle.net/rkw79/PagTJ/show/"
для поля URL:
"http://jsfiddle.net/rkw79/PagTJ/"
после этого сохраните файл и перейдите в папку show (или имя файла, с которым вы сохранили) в этой папке, вы получите html-файл show_resource.HTML. это ваш фактический файл. теперь откройте его в браузере и просмотрите исходный код , Удачи -------- Уджвал Гупта
Не существует такого правильного способа загрузить все вещи вместе из JSFiddle, но для этого есть хакерский способ. Просто добавьте «внедренный /» или «внедренный / результат /» в конце вашего URL-адреса JSFiddle !, а затем вы можете сохранить всю страницу в виде файла HTML + внешние библиотеки (если хотите).
тогда просто используйте функцию проверки элементов браузера. Вы получите код на вкладке iframe. , в Chrome просто щелкните правой кнопкой мыши и выберите правку в виде вкладки HTML. и скопируйте содержимое HTML. это ваш настоящий код.
Ответы:
Хорошо, я узнал:
Вы должны указать
/show
после URL-адреса, над которым вы работаете:http://jsfiddle.net/<your_fiddle_id>/show/
Это сайт, который показывает результаты.
А потом, когда вы сохраните его в виде файла. Это все в одном HTML-файле.
Например:
http://jsfiddle.net/Ua8Cv/show/
для сайта http://jsfiddle.net/Ua8Cv
источник
http://jsfiddle.net/Ua8Cv
если вы просто наберете extra/show
в адресной строке и нажмете клавишу ввода (после чего браузер покажет ярлык исходного кода), чтобы получить исходный код.<a class="aiButton" id="showjscode" title="Show JavaScript code" href="#showjs"><span class="icon-pencil"></span>Show JS</a>
. Это ничего не делает, но, возможно, скоро будет/show
, сохраните полную страницу, затем посмотрите в папку, которая заканчивается_files
, внутри должен быть.html
файл с исходным кодом примера.Новый ответ на старый вопрос:
Шаг 1 : Вы должны поставить
/show
после того, какURL
вы работаете над:Он показывает вывод с заголовком результата.
Шаг 2 : Щелкните правой кнопкой мыши нижний фрейм и выберите View Frame Source . Вот и все. Вы получили HTML-код с онлайн-ссылками JS, CSS.
Просто сохраните это.
Например: http://jsfiddle.net/YRafQ/20/show/ для сайта http://jsfiddle.net/YRafQ/20/
Примечание. Просмотр источника кадра, а не просмотр страницы источника
Вы можете использовать этот код:
view-source:http://fiddle.jshell.net/<fiddle_id>/show/light/
Например: для моего fiddle_id:
YRafQ/20
источник
Добавление / шоу не представляет чистый исходный код, это встроенный рабочий пример. Чтобы отобразить его без каких-либо дополнительных сценариев, CSS и HTML, используйте:
Пример: http://fiddle.jshell.net/Ua8Cv/show/light/
источник
Result
в шапке?Нет, у JSFiddle нет функции загрузки. Тем не менее, это не очень сложно обойти и сохранить содержимое скрипки в любом случае.
Со времени публикации принятого ответа JSFiddle внесла некоторые последние изменения в пользовательский интерфейс и бэкэнд, которые влияют на способ загрузки скрипта. Обратите внимание на обновленные процедуры ниже.
Простой метод командной строки
Этот метод загружает только HTML, JavaScript и CSS скрипты в виде одного файла. Внешние ресурсы скрипки не сохраняются.
В командной строке, показанной ниже,
fiddle_id
относится к идентификационному номеру скрипки. Для скрипки с URL "http://jsfiddle.net/<fiddle_user>/<fiddle_id>
" или "http://jsfiddle.net/<fiddle_id>
"fiddle_id
требуется только значение . Этоfiddle_user
неважно.В командной строке введите одну командную строку:
Скрипка будет сохранена в файл с именем "
fiddle_id.html
".Более длинный метод браузера
Этот метод загружает скрипку, а также ее внешние ресурсы. Приведенные шаги основаны на использовании Google Chrome. Использование других веб-браузеров также должно работать, но они могут использовать разные имена файлов.
Share/Embed
меню или ссылку "" вверху страницы редактирования JSFiddle. В появившемся диалоговом окне скопируйте URL-адрес, указанный в поле «Share full screen result
». Это будет иметь форму "http://jsfiddle.net/<fiddle_user>/<fiddle_id>/embedded/result/
" или "http://jsfiddle.net/<fiddle_id>/embedded/result/
".Webpage, Complete
» вFormat
меню « ». Обязательно укажите имя для страницы. Допустим, это называется "fiddle.html
" для этого примера.fiddle.html
" файл и каталог с именем "fiddle_files
". Файл "fiddle.html
" - это страница оболочки, которую JSFiddle использует для отображения заголовка с заголовком "Результат" и других ссылок. Он загрузит вашу скрипку в элемент iframe. По большей части этот файл можно игнорировать или даже удалить. Содержимое HTML, JavaScript и CSS вашей скрипки будет сохранено вfiddle_files
каталоге " " как один файл с именем "saved_resource.html
".fiddle_files/saved_resource.html
" туда, где вы хотите его использовать. Если ваша скрипка содержит элементы в разделе "External Resources
", они также появятся вfiddle_files
каталоге " ". Обязательно скопируйте эти файлы в то же место, куда вы скопировали "saved_resource.html
", поскольку файл HTML будет ссылаться на эти ресурсы с использованием относительных URL-адресов.Как упоминалось ранее, другие браузеры могут по-разному называть файлы при их сохранении. Например, Firefox называет объединенный файл HTML / JS / CSS "
fiddle_files/a.html
".источник
По-прежнему не поддерживается загрузка. НО .. вы можете использовать скрипт узла jsfiddle-downloader .
Установка :
Чтобы скачать одну скрипку с ее идентификатором :
Чтобы загрузить одну скрипту из ее URL :
Чтобы загрузить все сценарии определенного пользователя с сайта jsFiddle.net:
Он загрузит все резервные копии в текущем каталоге, сценарии jsFiddles будут называться как:
источник
Шаг 1:
Перейти на страницу скрипки, как
jsfiddle.net/oskar/v5893p61
Шаг 2:
Добавьте «/ show» в конце URL, например
jsfiddle.net/oskar/v5893p61/show
Шаг 3:
Щелкните правой кнопкой мыши на странице и выберите источник фрейма «Просмотр» . Вы получите код HTML, включая CSS в теге и Javascript (js) в теге. Также будет добавлена ссылка на источник для всей библиотеки. Посмотреть скриншот
Шаг 4:
Теперь вы можете сохранить исходный код в файле .html.
источник
Лучший способ это:
После этого вы можете скопировать этот код и вставить его на свой компьютер.
источник
В недавней работе мне пришлось скачать список URL скриптов и создать отдельную папку для каждой скрипки, имеющую отдельный файл html css js для каждого, для этого я создал следующую программу-сканер. https://github.com/sguha-work/FiddleCrawler. Он создаст имя папки со значением счетчика, и каждая папка будет иметь HTML, CSS, JS и файл сведений. (Подробный файл будет содержать ссылки на внешние ресурсы).
источник
Я нашел статью под вышеупомянутой темой. Там я мог взять полный код. Я упомяну это.
Вот шаги, упомянутые в статье:
также вы можете найти его: https://sirusdark.wordpress.com/2014/04/10/how-to-save-and-download-jsfiddle-code/
источник
Вы можете скачать с помощью этого пакета в узле JS,
https://www.npmjs.com/package/jsfiddle-downloader
источник
Вы должны поставить / показать после URL, над которым вы работаете:
Например:
для поля URL:
после этого сохраните файл и перейдите в папку show (или имя файла, с которым вы сохранили) в этой папке, вы получите html-файл show_resource.HTML. это ваш фактический файл. теперь откройте его в браузере и просмотрите исходный код , Удачи -------- Уджвал Гупта
источник
Хорошо, самый простой способ, который я обнаружил, это просто изменить 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
источник
Не существует такого правильного способа загрузить все вещи вместе из JSFiddle, но для этого есть хакерский способ. Просто добавьте «внедренный /» или «внедренный / результат /» в конце вашего URL-адреса JSFiddle !, а затем вы можете сохранить всю страницу в виде файла HTML + внешние библиотеки (если хотите).
источник
Есть npm-пакет
jsfiddle-downloader
.источник
Используйте http://jsfiddle.net/ / show / light /
тогда просто используйте функцию проверки элементов браузера. Вы получите код на вкладке iframe. , в Chrome просто щелкните правой кнопкой мыши и выберите правку в виде вкладки HTML. и скопируйте содержимое HTML. это ваш настоящий код.
источник
Ctrl+ S, сохраняет всю скрипку, внутри папки с файлами находится чистая страница, которую вы ищете
источник