Czy w jsFiddle jest funkcja pobierania, aby można było pobrać HTML z CSS, HTML i JS w jednym pliku, aby można było go uruchomić bez jsFiddle do celów debugowania?
Czy w jsFiddle jest funkcja pobierania, aby można było pobrać HTML z CSS, HTML i JS w jednym pliku, aby można było go uruchomić bez jsFiddle do celów debugowania?
Odpowiedzi:
Ok, dowiedziałem się:
Musisz wstawić /show
znak po adresie URL, nad którym pracujesz:
http://jsfiddle.net/<your_fiddle_id>/show/
To jest witryna, która pokazuje wyniki.
A potem, gdy zapiszesz go jako plik. To wszystko w jednym pliku HTML.
Na przykład:
http://jsfiddle.net/Ua8Cv/show/
dla witryny http://jsfiddle.net/Ua8Cv
http://jsfiddle.net/Ua8Cv
jeśli po prostu wpiszesz dodatek /show
na pasku adresu i naciśniesz Enter (a następnie przeglądarka wyświetli skrót do kodu źródłowego), aby uzyskać źródło.
<a class="aiButton" id="showjscode" title="Show JavaScript code" href="#showjs"><span class="icon-pencil"></span>Show JS</a>
. To nic nie da, ale może już niedługo
/show
zapisz całą stronę, a następnie zajrzyj do folderu, który kończy się _files
, wewnątrz powinien znajdować się .html
plik z kodem źródłowym przykładu.
Nowa odpowiedź na stare pytanie:
Metoda 1:
Krok 1 : Musisz stawiać /show
po URL
pracujesz na:
http://jsfiddle.net/<fiddle_id>/show/
Pokazuje dane wyjściowe z nagłówkiem wyniku.
Krok 2 : Kliknij prawym przyciskiem myszy dolną ramkę i wybierz opcję Wyświetl źródło ramki . Otóż to. Masz kod html z linkami online JS, CSS.
Po prostu to zapisz.
Na przykład: http://jsfiddle.net/YRafQ/20/show/ dla witryny http://jsfiddle.net/YRafQ/20/
Uwaga: Wyświetl źródło ramki, a nie źródło strony
Metoda 2:
Możesz użyć tego kodu: view-source:http://fiddle.jshell.net/<fiddle_id>/show/light/
Na przykład: dla mojego fiddle_id: YRafQ/20
view-source:http://fiddle.jshell.net/YRafQ/20/show/light/
Dodanie / show nie przedstawia czystego kodu źródłowego, jest to osadzony działający przykład. Aby wyświetlić go bez dodatkowych skryptów, css i html, użyj:
http://fiddle.jshell.net/<fiddle id>/show/light/
Result
w nagłówku?
Nie, JSFiddle nie ma funkcji pobierania. Jednak obejście tego i zapisanie zawartości skrzypiec nie jest trudne.
Od czasu opublikowania zaakceptowanej odpowiedzi JSFiddle dokonał kilku ostatnich zmian w interfejsie użytkownika i zapleczu, które mają wpływ na sposób pobierania skrzypiec. Zwróć uwagę na zaktualizowane procedury poniżej.
Ta metoda pobiera tylko kod HTML, JavaScript i CSS skrzypiec jako pojedynczy plik. Zewnętrzne zasoby skrzypiec nie są zapisywane.
W poleceń, pokazany poniżej, fiddle_id
odnosi się do liczby identyfikacyjnym ryba. W przypadku skrzypiec z adresem URL „ http://jsfiddle.net/<fiddle_user>/<fiddle_id>
” lub „ http://jsfiddle.net/<fiddle_id>
” fiddle_id
potrzebny jest tylko plik . To fiddle_user
nieważne.
W wierszu polecenia wprowadź pojedynczy wiersz polecenia:
fiddleId=fiddle_id; curl "http://fiddle.jshell.net/${fiddleId}/show/" -H "Referer: http://fiddle.jshell.net/${fiddleId}/" --output "${fiddleId}.html"
Skrzypce zostaną zapisane w pliku o nazwie „ fiddle_id.html
”.
Ta metoda pobiera skrzypce, a także zasoby zewnętrzne. Podane kroki dotyczą korzystania z przeglądarki Google Chrome. Korzystanie z innych przeglądarek internetowych również powinno działać, ale mogą używać innych nazw plików.
Share/Embed
menu / łącze „ ” u góry strony edycji JSFiddle. W wyświetlonym oknie dialogowym skopiuj adres URL widoczny w polu „ Share full screen result
”. Będzie miał postać „ http://jsfiddle.net/<fiddle_user>/<fiddle_id>/embedded/result/
” lub „ http://jsfiddle.net/<fiddle_id>/embedded/result/
”.Webpage, Complete
” w menu „ Format
”. Pamiętaj, aby podać nazwę strony. Powiedzmy, że w fiddle.html
tym przykładzie ma nazwę „ ”.fiddle.html
plik i katalog o nazwie „ fiddle_files
”. Plik „ fiddle.html
” jest stroną opakowującą, której JSFiddle używa do wyświetlenia nagłówka z tytułem „Wynik” i innymi linkami. Załaduje twoje skrzypce w elemencie iframe. W większości przypadków ten plik można zignorować lub nawet usunąć. Treść HTML, JavaScript i CSS Twoich skrzypiec zostanie zapisana w katalogu „ fiddle_files
” jako pojedynczy plik o nazwie „ saved_resource.html
”.fiddle_files/saved_resource.html
” tam, gdzie chcesz go użyć. Jeśli Twoje skrzypce zawierały elementy w „ External Resources
”, pojawią się one również w katalogu „ fiddle_files
”. Pamiętaj, aby skopiować te pliki w to samo miejsce, do którego skopiowałeś " saved_resource.html
", ponieważ plik HTML będzie odnosił się do tych zasobów przy użyciu względnych adresów URL.Jak wspomniano wcześniej, inne przeglądarki mogą nazywać pliki inaczej podczas ich zapisywania. Na przykład Firefox nadaje połączonemu plikowi HTML / JS / CSS nazwę „ fiddle_files/a.html
”.
Nadal nie jest obsługiwana funkcja pobierania. ALE .. możesz użyć skryptu węzła jsfiddle-downloader .
Instalacja :
npm install jsfiddle-downloader -g
Aby pobrać pojedyncze skrzypce ze swojego identyfikatora :
jsfiddle-downloader -i <fiddle-id> [-o <output file>]
Aby pobrać pojedyncze skrzypce ze swojego adresu 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
Aby pobrać wszystkie skrypty określonego „użytkownika” z jsFiddle.net:
jsfiddle-downloader -u <user> [-o <output file>]
Pobierze wszystkie kopie zapasowe w bieżącym katalogu, a skrypty jsFiddles będą nazywane jako:
[<output-folder>/]<id-fiddle>.html
Krok 1:
Przejdź do strony ze skrzypcami, npjsfiddle.net/oskar/v5893p61
Krok 2:
Dodaj „/ show” na końcu adresu URL, npjsfiddle.net/oskar/v5893p61/show
Krok 3:
Kliknij stronę prawym przyciskiem myszy i kliknij źródło ramki widoku . Otrzymasz kod HTML zawierający CSS w tagu i Javascript (js) w tagu. [Zostanie również dodany link źródłowy całej biblioteki].
Zobacz zrzut ekranu
Krok 4:
Teraz możesz zapisać kod źródłowy w pliku .html.
W niedawnej pracy musiałem pobrać listę skrzypcowych adresów URL i utworzyć osobny folder dla każdego skrzypiec z osobnym plikiem html css js dla każdego, stworzyłem do tego następujący program przeszukiwacza. https://github.com/sguha-work/FiddleCrawler Utworzy nazwę folderu z wartością licznika, a każdy folder będzie miał plik html, css, js i szczegóły. (Plik szczegółów będzie zawierał linki do zasobów zewnętrznych).
Znalazłem artykuł pod powyższym tematem, w którym mogłem wziąć cały kod.
Oto kroki wymienione w artykule:
Dodaj osadzony / wynik / na końcu adresu URL JSFiddle, który chcesz pobrać.
Pokaż ramkę lub kod źródłowy ramki: kliknij prawym przyciskiem myszy w dowolnym miejscu strony i wyświetl ramkę w nowej karcie lub od razu w źródle (wymaga przeglądarki Firefox).
Na koniec zapisz stronę w preferowanym formacie (MHT, HTML, TXT itp.) I voilà!
również możesz go znaleźć: https://sirusdark.wordpress.com/2014/04/10/how-to-save-and-download-jsfiddle-code/
Możesz pobrać za pomocą tego pakietu w node js,
Musisz wstawić / pokazać a po adresie URL, nad którym pracujesz:
Na przykład:
"http://jsfiddle.net/rkw79/PagTJ/show/"
dla adresu URL pola:
"http://jsfiddle.net/rkw79/PagTJ/"
następnie zapisz plik i przejdź do folderu show (lub nazwy pliku, w którym zapisałeś) w tym folderze u otrzymasz plik html show_resource.HTML. to jest twój rzeczywisty plik. teraz otwórz go w przeglądarce i wyświetl kod źródłowy . Powodzenia -------- Ujjwal Gupta
Okay, najprościej, dowiedziałem się, że zmieniam adres URL (jsfiddle [kropka] net) na fiddle [kropka] jshell [kropka] net / Masz jasny kod HTML, bez żadnego elementu iframe ... Przykład: https: // jsfiddle [kropka] net / mfvmoy64 / 27 / show / light / -> http: // fiddle [kropka] jshell [kropka] net / mfvmoy64 / 27 / show / light /
( Należy zmienić „.” Na „[kropka]” z powodu przepełnienia układarki ...: c ) PS: sry 4 zły angielski
Nie ma takiego właściwego sposobu na pobranie wszystkich rzeczy razem z JSFiddle, ale jest na to sposób hakerski. Po prostu dodaj „embedded /” lub „embedded / result /” na końcu adresu URL JSFiddle!, A następnie możesz zapisać całą stronę jako plik HTML + zewnętrzne biblioteki (jeśli chcesz).
Użyj http://jsfiddle.net/ / show / light /
następnie użyj funkcji inspect elementu przeglądarki. otrzymasz kod w zakładce iframe. . w chrome kliknij prawym przyciskiem myszy i wybierz edytuj jako zakładkę html. i skopiuj zawartość html. to jest twój rzeczywisty kod.
Ctrl+ S, zapisuje całe skrzypce, w folderze plików znajduje się czysta strona, której szukasz