Neregistrovaný Přihlásit Registrovat

Přidat otázku mezi oblíbenéZasílat nové odpovědi e-mailem Kde jsou uloženy změny které provádí JS v html souboru?

Ahoj,
jak prosím funguje tohle.
Mám nějaký soubor.html, ten spustím a pomocí JS (který je uvnitř toho souboru index.html) třeba přidávám další položky <li> do <ul>, měním obsah v <input> atd.
Kam se tyto změny ukládají? Proč je nevidím třeba ani v Chrome DevTools a v podobných aplikacích?
Potřeboval bych ten soubor index.html přes prohlížeč stáhnout do PC (jelikož samotný JS ukládat soubory neumí), ale potřebuji ho stáhnout včetně těch provedených změn.

Našel jsem kód, který stáhne celý obsah souboru index.html

<a onclick="this.href='data:text/html;charset=UTF-8,'+encodeURIComponent(document.documentElement.outerHTML)" href="#" download="index.html">Download</a>

Bohužel aplikované změny se tímto způsobem neuloží.

Pokud někdo ví, budu velmi rád za rady.

Předmět Autor Datum
"Mám nějaký soubor.html, ten spustím a pomocí JS (který je uvnitř toho souboru index.html) třeba při…
Mlocik97 20.08.2019 11:09
 Mlocik97
Díky, mám tři dotazy, ten DOM který se vygeneroval při prvním načtení stránky a) obsahuje úplně cel…
pepe51 20.08.2019 11:19
 pepe51
1. Ano, celé HTML a CSS informace ku každému elementu v DOMe. 2. Ano, devtools 3. Ano, priklad: http…
Mlocik97 20.08.2019 11:22
 Mlocik97
Díky, 2. V devtools to hledám ale fakt to nevidím :( Předpokládám, že mám hledat něco co obsahuje so…
pepe51 20.08.2019 11:29
 pepe51
2. Firefox to má pomenované ako DOM a i DOM zobrazuje priamo, Chrome to má nazvané elements (což je…
Mlocik97 20.08.2019 11:31
 Mlocik97
A poradíš jak vyexportovat celý dom?
pepe51 20.08.2019 11:34
 pepe51
https://stackoverflow.com/questions/48765701/how-can-i-download-the-current-dom-with-html-or-javascr…
Mlocik97 20.08.2019 11:38
 Mlocik97
Díky moc. vytvořil jsem tedy soubor index.html a do něj vložil z odkazu <html> <head> <title>Haha</…
pepe51 20.08.2019 12:09
 pepe51
skuste: console.log(document.documentElement.outerHTML); to som otestoval, malo by fungovať.
Mlocik97 20.08.2019 12:22
 Mlocik97
Ano, to funguje. Teď to tedy mám celý takto <html> <head> </head> <body> <a href="#">Download HTML…
pepe51 20.08.2019 12:37
 pepe51
To spíš takhle: anchor.setAttribute('href', 'data:text/html;charset=UTF-8,<html>' + encodeURICompon…
Wikan 20.08.2019 13:00
 Wikan
Super, už to stahuje, ale pouze k původnímu html přidá na začátek <html> a na konec </html> Změny se…
pepe51 20.08.2019 13:18
 pepe51
Jaké změny?
Wikan 20.08.2019 13:19
 Wikan
Přidal jsem tam <textarea>aaaa</textarea> a po načtení jsem to v prohlížeči změnil na bbbb a stáhnul…
pepe51 20.08.2019 13:44
 pepe51
V tom případě to anchor.setAttribute('href',... musíš zavolat až při kliku na download. Takhle se to…
Wikan 20.08.2019 13:53
 Wikan
Tak že takto? <html><head></head><body> <input id="name" value="aaaa"> <a href="#" onclick="downloa…
pepe51 20.08.2019 14:07
 pepe51
<html><head></head><body> <input id="name" value="aaaa" onChange="setValue(this, value)"> <a href="#…
Wikan 20.08.2019 15:45
 Wikan
Hm, takže tohle onChange="setValue(this, value) budu muset napsat úplně do všech elementů? Díky
pepe51 20.08.2019 20:31
 pepe51
<html><head></head><body> <input id="name" value="aaaa"> <input id="type" value="bbbb"> <a href="#"…
Wikan 20.08.2019 20:54
 Wikan
Tak jsem to nemyslel, jde o to, že se snažím celou dobu vyřešit uložení všech změn v tom html soubor…
pepe51 21.08.2019 10:12
 pepe51
A ten můj kód to snad nedělá?
Wikan 21.08.2019 10:20
 Wikan
V tomto případě to tvůj kód samozřejmě děla, ale ja budu doplňovat spoustu dalších div-y, seznamů at…
pepe51 21.08.2019 13:51
 pepe51
A to si myslíš, nebo víš?
Wikan 21.08.2019 13:56
 Wikan
Jestli si myslím co, že to nebude fungovat? Nebude, už jsem to zkoušel..
pepe51 21.08.2019 14:42
 pepe51
Zvláštní, že mně to funguje. https://jsfiddle.net/y6wajc03/
Wikan 21.08.2019 15:27
 Wikan
Tak já to zkoušel třeba takto a upravený text v <textarea> se vůbec neuloží. kyefz3Lg
pepe51 21.08.2019 15:57
 pepe51
Psal jsi o seznamech a divech ne o textarea. Ale stačí to udělat podobně jako s inputy. https://jsfi…
Wikan 21.08.2019 16:57
 Wikan
var inputs = document.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { input…
Mlocik97 21.08.2019 17:08
 Mlocik97
To ať si už upraví jak chce. Zkopírovat to bylo rychlejší.
Wikan 21.08.2019 17:12
 Wikan
Ale jak si přeješ. document.querySelectorAll("input, textarea").forEach(function(elm) { elm.addEven…
Wikan 21.08.2019 20:03
 Wikan
@Wikan Prosím tě, šla by tahle funkce poopravit? function download() { var anchor = document.query…
pepe51 30.08.2019 20:39
 pepe51
A proč to A nedáš dovnitř LI?
Wikan 30.08.2019 21:42
 Wikan
To samozřejmě můžu, ale je to jediný element A který mám, je to problém? Díky
pepe51 30.08.2019 21:45
 pepe51
Čemu to vadí?
Wikan 30.08.2019 21:48
 Wikan
Ničemu ale fakt bych to chtěl bez toho A, ale když se tak ptáš, předpokládám, že to nejde :(
pepe51 30.08.2019 22:07
 pepe51
Když to ničemu nevadí, tak proč to tak potřebuješ bez toho?
Wikan 30.08.2019 22:08
 Wikan
Tak se vymáčkni ;-) jde to nebo ne?
pepe51 30.08.2019 22:56
 pepe51
Tak se vymáčkni, proč to potřebuješ? Asi by to šlo, jen by to bylo o dost složitější.
Wikan 31.08.2019 06:26
 Wikan
nerieš ho... je to blb s akože "zvladol bych pred 10 rokmi napísať lepšie než Vy" (doslova), pritom…
Mlocik97 31.08.2019 07:44
 Mlocik97
První škemráš o práci. Po zadání navrhneš cenu a následně je cena vyšší téměř o 100%! Poté se omlouv…
pepe51 31.08.2019 12:10
 pepe51
Mám sem dát screenshoty? Vy ste pridávali požiadavky... povedali ste že 30€ je privela na administra…
Mlocik97 31.08.2019 13:21
 Mlocik97
Nechybí tam minimálně jedna nula?
Wikan 31.08.2019 16:55
 Wikan
To mi presne povedal i iný môj kamoš...
Mlocik97 31.08.2019 19:42
 Mlocik97
Asi by to šlo, jen by to bylo o dost složitější. Bylo by to hodně složitý, asi o jeden řádek v html…
P.Vodička 31.08.2019 17:59
 P.Vodička
Tím líp. Rád se nechám poučit.
Wikan 31.08.2019 18:07
 Wikan
Nazdar chlapy, pročítám tohle vlákno a při použití tohoto kódu co tady uvádíte mám problém. Stáhne s…
Začátečník-vJS 28.10.2019 11:39
 Začátečník-vJS
Asi nic. Browsery mají omezení na délku. Můžeš zkusit jiný, nebo jinou verzi, ale to je asi tak vše.
Wikan 28.10.2019 11:48
 Wikan
Díky za nápovědu. Existuje jiná možnost? Ze stránek tiddlywiki.com si stáhnu jeden soubor který fung…
Začátečník-vJS 28.10.2019 12:04
 Začátečník-vJS
jak som psal, pripraviť súbor na servery.
Mlocik97 28.10.2019 12:05
 Mlocik97
Ten soubor funguje bez serveru, přímo ve windows.
Začátečník-vJS 28.10.2019 12:13
 Začátečník-vJS
Nechápete.... Ta webstranka je na servery, ten server pripravy aj ten html subor, ten stiahnete a te…
Mlocik97 28.10.2019 12:23
 Mlocik97
Jeden o voze a druhý o koze. Z toho serveru stáhnu na disk celou tu aplikaci, je to jeden soubor cca…
Začátečník-vJS 28.10.2019 12:29
 Začátečník-vJS
Ano, stáhneš si to ze serveru. Jenže ptal ses na to, jak si to stáhnout i bez serveru.
Wikan 28.10.2019 12:31
 Wikan
1) stáhnu si ze serveru tu aplikaci na disk 2) odpojím internet 3) spustit v prohlížeči tu aplikaci…
Začátečník-vJS 28.10.2019 12:35
 Začátečník-vJS
jo aha, ale to už pak není webstranka ale len dokument. Inak když to stahujete tak mate v zdrojakoch…
Mlocik97 28.10.2019 12:51
 Mlocik97
Jaký je mezi tím rozdíl, webový stránka a dokument?
Začátečník-vJS 28.10.2019 13:27
 Začátečník-vJS
Tak jsem to zkusil. 2,5 MB to zvládlo, když jsem tam přidal (nevím přesně kolik, ale rozhodně míň ne…
Wikan 28.10.2019 12:52
 Wikan
Zkoušel jsem stáhnout 650MB, v pohodě. poslední
Začátečník-vJS 28.10.2019 13:46
 Začátečník-vJS
Inak toto robiť je prasecina... a ani neviem dôvod prečo by niekto potreboval sťahovať subor zo súbo…
Mlocik97 28.10.2019 12:57
 Mlocik97
Potom už len pripraviť súbor na servery,... ako data URI nepodporuje viac ako 3MB (tuším v novom chr…
Mlocik97 28.10.2019 11:50
 Mlocik97
Jde otevřu si libovolnou stránku, v konzoli vyberu odkaz a nastavím mu onclick onclick="this.style.…
Droo 31.08.2019 18:26
 Droo

"Mám nějaký soubor.html, ten spustím a pomocí JS (který je uvnitř toho souboru index.html) třeba přidávám další položky <li> do <ul>, měním obsah v <input> atd.
Kam se tyto změny ukládají?"

Zmeny nikde, avšak pri prvom načítaní HTML sa vygeneruje DOM (Dokument Objekt Model) s ktorým da pak manipuluje a ten mění svůj stav... teda si vždy uchováva len aktuálny stav.

V Chrome Devtools i vo Firefox Devtool je ten aktuální stav možné vidět.

https://stackoverflow.com/questions/48765701/how-can-i-download-the-current-dom-with-html-or-javascript

len namiesto vypísania ho do konzole ho vložíte do odkazu na stiahnutie:

https://diskuse.jakpsatweb.cz/?action=vthread&forum=8&topic=172601 čož je napísané v tomto vlákne už od tazatele že jak. Len to

anchor.setAttribute('href', 'data:text/html;charset=UTF-8,<p>asdf</p>');

vymeníte za

anchor.setAttribute('href', 'data:text/html;charset=UTF-8,"<html>" + document.documentElement + "</html>");

možno vhodnejšie bude ešte ten celý DOM uložiť do konštanty len raz a tú konštantu napísať do atribútu, lebo po vykonaní sa zmení DOM čož vyústi v zmenu i toho čo sa má sťahovať. (Záleží samozrejme jak je to napsané, ak je to vo funkcii, ktorá sa zavolá len raz, tak vtedy netreba)

Díky moc.
vytvořil jsem tedy soubor index.html a do něj vložil z odkazu

<html>
<head>
    <title>Haha</title>
    <script>
        function test(){console.log("<html>" + document.documentElement + "</html>")}
    </script>
</head>
<body onload="test()">
    <div><p>Hi!</p></div>
</body>
</html>

Spustil soubor a v prohlížeči zobrazil konzoli.
Předpokládám, že bych měl v konzoli vidět přesně tohle

<html>
<head>
    <title>Haha</title>
    <script>
        function test(){console.log("<html>" + document.documentElement + "</html>")}
    </script>
</head>
<body onload="test()">
    <div><p>Hi!</p></div>
</body>
</html>

ale vidím tam jen

<html>[object HTMLHtmlElement]</html>

Díky

Ano, to funguje.

Teď to tedy mám celý takto

<html>
<head>
</head>
<body>
<a href="#">Download HTML</a>
<script>
var anchor = document.querySelector('a');
anchor.setAttribute('download', 'index.html');
anchor.setAttribute('href', 'data:text/html;charset=UTF-8',"<html>" + document.documentElement + "</html>");
</script>
</body>
</html>

A pokud kliknu na odkaz Download, tak ve správci stahování (Chrome) mi to u toho "staženého" (žádný soubor se nestáhne) souboru píše Chyba - Chyba sítě Jinak to nepíše nikde žádnou chybu.

PS: zkouším to tedy jen přimo ve Windows 10, nemám to na serveru.

Přidal jsem tam <textarea>aaaa</textarea> a po načtení jsem to v prohlížeči změnil na bbbb a stáhnul index.html. Čekal jsem, že tam bude <textarea>bbbb</textarea>.
Ale zkoušel jsem taky pomocí JS přidat do seznamu další položky - které vidím už i devtools ale taky se to neuloží.

Tak že takto?

<html><head></head><body>
<input id="name" value="aaaa">
<a href="#" onclick="downloadHTML()">Download HTML</a>
<script>
function downloadHTML (){
    var anchor = document.querySelector('a');
    anchor.setAttribute('href', 'data:text/html;charset=UTF-8,' + encodeURIComponent(document.documentElement.outerHTML));
    anchor.setAttribute('download', 'index.html');
}
</script></body></html>
<html><head></head><body>
<input id="name" value="aaaa" onChange="setValue(this, value)">
<a href="#" onclick="downloadHTML()">Download HTML</a>
<script>
function downloadHTML() {
    var anchor = document.querySelector('a');
    anchor.setAttribute('href', 'data:text/html;charset=UTF-8,' + encodeURIComponent(document.documentElement.outerHTML));
    anchor.setAttribute('download', 'index.html');
}
function setValue(input, value) {
    input.setAttribute('value', value);
}
</script></body></html>
<html><head></head><body>
<input id="name" value="aaaa">
<input id="type" value="bbbb">
<a href="#" onclick="downloadHTML()">Download HTML</a>
<script>
function downloadHTML() {
    var anchor = document.querySelector('a');
    anchor.setAttribute('href', 'data:text/html;charset=UTF-8,' + encodeURIComponent(document.documentElement.outerHTML));
    anchor.setAttribute('download', 'index.html');
}
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener("change", function(ev) {
        var input = ev.target;
        input.setAttribute("value", input.value);    
    });    
}
</script></body></html>
var inputs = document.getElementsByTagName("input");
      for (var i = 0; i < inputs.length; i++) {
        inputs[i].addEventListener("change", function(ev) {
          var input = ev.target;
          input.setAttribute("value", input.value);
        });
      }
      var areas = document.getElementsByTagName("textarea");
      for (var i = 0; i < inputs.length; i++) {
        areas[i].addEventListener("change", function(ev) {
          var area = ev.target;
          area.innerText = area.value;
        });
      }

proč nepoužiješ array tagov s inputmi a neprejdeš cez array cyklom? 2x psát skoro stejný kód mi neprijde rozumné.

Ale jak si přeješ.

document.querySelectorAll("input, textarea").forEach(function(elm) {
    elm.addEventListener("change", function(ev) {
        var input = ev.target;
        switch (input.tagName.toLowerCase()) {
            case "input":
                input.setAttribute("value", input.value);
                break;
            case "textarea":
                input.innerText = input.value;
                break;
        }
    });
});

@Wikan
Prosím tě, šla by tahle funkce poopravit?

      function download() {
        var anchor = document.querySelector("a");
        anchor.setAttribute(
          "href",
          "data:text/html;charset=UTF-8," +
            encodeURIComponent(document.documentElement.outerHTML)
        );
        anchor.setAttribute("download", "index.html");
      }

Teď se funkce volá

<a href="#" onclick="download()">Download</a>

bylo by fajn, kdyby jsem ji mohl zavolat pouze položkou v seznamu

<li onclick="download()">Download</li>

Díky

První škemráš o práci. Po zadání navrhneš cenu a následně je cena vyšší téměř o 100%! Poté se omlouváš, že jsi si špatně přečetl zadání a to co jsi vyprodukoval byl totálně nepoužitelný humus ve kterém chyběla polovina věcí.... a teď mi budeš ještě nadávat?

Mám sem dát screenshoty? Vy ste pridávali požiadavky... povedali ste že 30€ je privela na administrační systém na pridavanie (vratane formulara) , edit, a mazanie článkov kategórii, dvojurovnove navigovanie (bez pouzia tagu <a> a bez manipulacie s URL (wtf) a par ďalších vecí. O prácu som neskemral. Len som sa ozval na to "ponukam zakazku".

Nazdar chlapy, pročítám tohle vlákno a při použití tohoto kódu co tady uvádíte mám problém. Stáhne soubor s velikostí do 3.0MB. Soubor s velikostí větší než 3.1MB se soubor nestáhne / Chyba - Chyba sítě. Nějaké nápady? Jsem začátečník, opravdu nevím?


<a href="#" 
<script>
function downloadHTML() {
    var anchor = document.querySelector('a');
    anchor.setAttribute('href', 'data:text/html;charset=UTF-8,' + encodeURIComponent(document.documentElement.outerHTML));
    anchor.setAttribute('download', 'index.html');
}

jo aha, ale to už pak není webstranka ale len dokument. Inak když to stahujete tak mate v zdrojakoch teda ten kód. Proč ho len neskopirujete? Ostatne pri nasadení na localhost ci akykolvek server bude ten limit platiť pre data URI, a bude nutné připravit soubor na servery. Akp dokument to môže fungovať.

Jde
otevřu si libovolnou stránku, v konzoli vyberu odkaz a nastavím mu onclick

onclick="this.style.color='yellow';this.href='data:text/html;charset=UTF-8,'+encodeURIComponent(this.parentNode.outerHTML)"

Otevřes se mi daný odkaz... takže ok. Je to na co s eptáš?

PS:

nevíte náhodou, jak prohlížeči nebo adblocku zabránit měnit odkazy? myslím tím nějak generálně, na všech stránkách, případně selektivně

sice mohu dávat do ublocku pravidla
dometan1.cz,domena.2.cz....,domena999.cz##+js(addEventLisenter-defuser.js, onmousedown), ale neřeší to všechny případy, není to přívětivé a musím taxativně jmenovat všechny domény ( nelze aplikova +js() obecně)

Zpět do poradny Odpovědět na původní otázku Nahoru