nicht angemeldet
<body> Inhalt temporär entfernen
Henry
<body> Inhalt temporär entfernen
Henry
Rolf B
kai345Hallo,
ich hab mir da gerade was gebastelt und funktioniert auch. Bin aber nicht sicher ob das sauber gelöst und/oder Alternativen gegeben hätte.
Um es kurz zu machen, in einer dynamischen Webseite möchte ich die Dynamik für einen Moment rauswerfen, so dass ich das Basisgerüst ohne viel auszusortieren abspeichern kann. Gleichzeitig aber auch die gesplitteten Inhalte zur Verfügung habe.
Also dachte ich mir, nehme das ganze Dokument, entferne den body-bereich und speichere den Content als Variable, packe danach aber wieder rein damit ich dynamisch weiter arbeiten kann. Eigentlich hatte ich gar nicht erwartet dass die funktioniert, wenn die Befehle/Funktionen einmal entfernt wurden(die ja im Body stehen), doch scheint ja so als wenn trotzdem die letzte Prozedur auf Basis des alteren DOMs zu Ende gebracht wird.
Funktioniert gut, aber hätte ich es besser anders lösen sollen?
<h5>BodyCut</h5>
<button onclick="cutBody();">BodyCut</button>
<h5>Diese Button erst nach BodyCut</h5>
<button onclick="alert(bodyHTML);">bodyHTML</button>
<button onclick="alert(cleanHTML);">cleanHTML</button>
<script>
function cutBody()
{
var fulltxt = document.documentElement.outerHTML;
//Globale Variable
bodyHTML = document.body.innerHTML;
document.body.innerHTML='\r\n';
//Globale Variable
cleanHTML = document.documentElement.outerHTML;
document.body.innerHTML = bodyHTML;
/****
Ab jetzt steht der Quelltext gesäubert vom
Body und der Body einzeln als Variable zur Verfügung
****/
}
</script>
Gruss
Henry
--
Meine Meinung zu DSGVO & Co:
„Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
Meine Meinung zu DSGVO & Co:
„Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
-
Hallo Henry,
wenn es für Dich kein Problem ist, den Body herauszulöschen, dann ist das wohl der beste Weg.
Ich hatte zuerst eine andere Idee, aber die taugt nichts:
let cleanHTML = "<!doctype html>\n" + "<html>" document.head.outerHTML + "\n" + "<body></body>\n" + "</html>;Grund für die rote Karte: Die Attribute des html Elements gehen verloren. Die müsste man bei diesem Ansatz herauslösen, und dann wird der Code genauso umfangreich wie Deiner.
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf,
wenn es für Dich kein Problem ist, den Body herauszulöschen, dann ist das wohl der beste Weg.
Ich lösche ja nur den Inhalt. Aber, schade hatte im Stillen gehofft es geht vielleicht noch viel simpler oder sauberer.
…, und dann wird der Code genauso umfangreich wie Deiner.
Umfangreich? die Buttons fallen schon mal weg, weil nur zum Testen. Und der Rest, wenn ich alles überflüssige entferne…
<script> function cutBody() { bodyHTML = document.body.innerHTML; document.body.innerHTML='\r\n'; cleanHTML = document.documentElement.outerHTML; document.body.innerHTML = bodyHTML; } </script>… ist doch erstaunlich wenig.
Einzig was mich stört ist eben, dass ich ins Dom seltsam eingreife und dann millisekunden lang irgendwo zwischen den Welten operiere.
Gruss
Henry--
Meine Meinung zu DSGVO & Co:
„Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“-
Hallo Henry,
Einzig was mich stört ist eben, dass ich ins Dom seltsam eingreife und dann millisekunden lang irgendwo zwischen den Welten operiere.
Es geht Dir aber doch primär darum, eine Vorlage zu erhalten. Die Seite an sich ist danach doch schnurz, oder? Von daher: who cares?
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf,
Es geht Dir aber doch primär darum, eine Vorlage zu erhalten. Die Seite an sich ist danach doch schnurz, oder? Von daher: who cares?
nicht ganz. Das Ganze ist wesentlich komplexer, das Beispiel hier zeigt natürlich nur einen kleinen Teil daraus. Es ist eine sehr dynamische Seite, eine Art Editor mit integrierten Dokumentationsschablonen und Ausführ und Downloadoptionen. Und weil das sowohl online als offline funktionieren soll, experimentiere ich gerade mit allen HTML und Js gegebenen Möglichkeiten, ob meine Vorstellungen ohne Server realisierbar wäre.
Gruss
Henry--
Meine Meinung zu DSGVO & Co:
„Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
-
-
-
-
Hallo,
ich hab mir da gerade was gebastelt und funktioniert auch. Bin aber nicht sicher ob das sauber gelöst und/oder Alternativen gegeben hätte.
Um es kurz zu machen, in einer dynamischen Webseite möchte ich die Dynamik für einen Moment rauswerfen, so dass ich das Basisgerüst ohne viel auszusortieren abspeichern kann. Gleichzeitig aber auch die gesplitteten Inhalte zur Verfügung habe.
Also dachte ich mir, nehme das ganze Dokument, entferne den body-bereich und speichere den Content als Variable, packe danach aber wieder rein damit ich dynamisch weiter arbeiten kann. Eigentlich hatte ich gar nicht erwartet dass die funktioniert, wenn die Befehle/Funktionen einmal entfernt wurden(die ja im Body stehen), doch scheint ja so als wenn trotzdem die letzte Prozedur auf Basis des alteren DOMs zu Ende gebracht wird.
Ich würde es mit DOM-Methoden lösen und die Kinder von body in ein documentFragment umzuhängen..
Anbei ein kleines Besipiel, das ich mal eben erstellt habe (daher eventuell nicht die eleganteste Lösung)
Das setTimeout-Geraffel dient nur dazu, den Vorgang visuell nachvollziehbar zu machen.
nach 2 Sekunden -> body leeren nach weiteren 2 Sekunden -> Inhalt wieder einzufügen.
<!DOCTYPE html> <html> <head><title>Test</title></head> <meta charset="UTF-8"> <body> <p>Yo</p> <p><span>hurz</span></p> <p>narf!</p> <ul><li>1</li><li>3</li><li>5</li><li>7</li></ul> <p>Desoxyribonucleinsäure-Doppelhelix</p> <p>YOLO</p> <script> const bodyContent = document.createDocumentFragment(); setTimeout(function () { umhaengen(document.body, bodyContent); setTimeout(function () { umhaengen(bodyContent, document.body) }, 2000) }, 2000) function umhaengen(src, dest) { let node; while ((node= src.childNodes[0])) { dest.appendChild(node); } } </script> </body> </html>--
Stur lächeln und winken, Männer!-
Hallo kai345,
Ich würde es mit DOM-Methoden lösen und die Kinder von body in ein documentFragment umzuhängen..
Ja, klingt plausibel, zumal documentFragment ja genau für sowas gemacht scheint.
Anbei ein kleines Besipiel, das ich mal eben erstellt habe (daher eventuell nicht die eleganteste Lösung)
Danke, zeigt zumindest die Möglichkeit auf.
Ich tue mich nur noch ein wenig schwer mit dem Verständnis der Zugriffe auf das Fragment. Verstehe es so, dass es die gleichen Möglichkeiten haben müsste wie im normalen Baum. Wenn ich aber intuitiv daran gehe, klappts noch nicht:
function myFunction() { var d = document.createDocumentFragment(); d.appendChild(document.documentElement); d.body.innerHTML ='halloooooo'; alert(d.outerHTML); }Daher muss ich mich da erst noch reinarbeiten. Melde mich dann wieder dazu.
Gruss
Henry--
Meine Meinung zu DSGVO & Co:
„Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“-
Hallo Henry,
ein Fragment ist kein vollständiges Dokument, darum hat es keine body-Eigenschaft.
Du solltest aber d.querySelector("body") verwenden können.
Rolf
--
sumpsi - posui - obstruxi -
Moin.
Ich tue mich nur noch ein wenig schwer mit dem Verständnis der Zugriffe auf das Fragment. Verstehe es so, dass es die gleichen Möglichkeiten haben müsste wie im normalen Baum.
Nein, ein documentFragment ist kein document-Objekt und hat daher auch nicht dessen Eigenschaften wie z.B. .body
Ein documentFragment ist im Grunde einem nicht ins DOM gehängten Element ähnlich, nur mit weniger Methoden und Eigenschaften. innerHTML gehört z.B. nicht dazu.Ich habe es vorgeschlagen, weil die DOM-Serialisierung per (inner|outer)HTML sehr unschön ist und vermieden werden sollte. Man hängt Elemente an das docfrag an oder ab, wie man es auch mit Jacken an einer Kleiderhaken-Leiste macht (nicht ganz passend aber ungefähr). Wenn man ein Element aus dem DOM an ein Fragment umhängt, wird es automatisch mit allen Kind-Elementen aus dem Elementbaum entfernt und im documentFragment zwischengespeichert.
Wichtig an meinem Beispiel ist eigentlich nur die Mini-Schleife aus der Funktion 'umhaengen', die alle Kind-Elemente (incl. Text und Zeilenumbrüchen etc) vom Start-Element ermittelt und ans Ziel-Element anhängt und somit aus dem Start-Element entfernt.
Ich habe es als Funktion geschrieben, weil man dann durch einfaches Vertauschen von Start und Ziel-Parameter die Elemente wieder zurückhängen kann.(Sorry, falls der Text zu wirr ist, bin noch nicht ganz wach)
/K
--
Stur lächeln und winken, Männer!
-
-