Ich muss den HTML-Code mit aktuellen Styles (vielleicht inline) einer Seite erhalten, die das Rendering beendet und Skripte beendet hat, mit einer serverseitigen Anwendung, die nur eine URL erhält (keine zusätzlichen Informationen wie Cookies, keine POSTs, keine behindernden Formen usw.).
Eine Brücke / ein Proxy zu einem temporär laufenden Browser oder ein eigenständiges Dienstprogramm, das eine Browserbibliothek verwendet, ist eine akzeptierte Lösung (die ausgewählte Browser- oder Browserbibliothek muss jedoch auf allen wichtigen Plattformen verfügbar sein und ohne eine OS GUI vorhanden oder installiert).
Eine optionale Anforderung besteht darin, alle Skripte im Nachhinein zu entfernen (es gibt bereits eigenständige Lösungen hierfür, die hier hinzugefügt werden, weil die gegebene Antwort in der Lage sein wird, Skripte beim Rendern oder ähnlichem zu entfernen).
Wie bekomme ich einen Snapshot in HTML + CSS in einer einzelnen HTML-Datei des aktuellen HTML-Dokuments mit den aktuellen Stilen (möglicherweise inline) und aktuellen Bildern (mit Daten-URI )?
Wenn es mit reinem PHP gemacht werden kann, wäre es ein Plus (obwohl ich bezweifle, dass ich nichts Interessantes gefunden habe).
Bearbeiten: Ich weiß, wie ich HTTP-Ressourcen laden und den HTML-Code für eine URL abrufen kann, das ist nicht das, wonach ich suche;)
Bearbeiten 2 Beispiel Eingabe HTML:
%Vor%Beispielausgabe:
%Vor% Beachten Sie, wie sich das <title> -Tag geändert hat, wie border: 1px % border: 0px geworden ist, wie die Bild-URL in eine Daten-URI .
Beispielsweise können einige dieser Transformationen (Inline-CSS und <title> -Tag) beobachtet werden, wenn das Dokument mit dem Google Chrome-Inspektor überprüft wird.
Bearbeiten 3 Ersetzen von externen Ressourcen durch On-Page-Dateien (Stile und Bilder) und Entfernen von JavaScript ist ein einfacher Teil. Der schwierige Teil ist die Berechnung des CSS-Stils nach dem Ausführen von Javascript.
Edit 4 Vielleicht könnte dies mithilfe von injiziertem JavaScript geschehen (benötigen Sie trotzdem eine Browserkontrolle)?
PhantomJS ist ein kopfloses (GUI-loses) WebKit mit JavaScript-API. Es läuft auf allen wichtigen Plattformen, wie ich es in meiner Frage gefordert habe.
Es kann JavaScript-Skripte ausführen, um den GUI-losen Webbrowser zu steuern. Es hat eine leistungsfähige API und viele, viele Beispiele.
In meiner Freizeit habe ich in den letzten 2-3 Tagen die Lösung für meine Frage geschrieben, die alle Anforderungen wunderbar abdeckt. Ich habe keine Webseite gefunden, für die es nicht funktionieren würde.
.
Verwendung, Befehlszeile:
%Vor%.
Javascript darf für n Sekunden laufen, nachdem alles andere geladen wurde. Es sollte sogar für Webseiten funktionieren, die komplett mit Javascript erstellt wurden.
.
Anmerkungen:
Wo immer möglich, wird das XHR-Laden von Ressourcen dem HTML5-Canvas-Rendering vorgezogen, da die Dateigröße reduziert wird und Qualitätsverluste vermieden werden (die Wiederverwendung von Originaldateien ist besser als alles andere).
<link> und <img> werden beibehalten und data: URIs werden innerhalb der Attribute href und src anstelle von URLs verwendet. Dasselbe gilt für background-image , das mit getComputedStyle () auf allen DOM-Knoten gelesen wird.
<script> -Tags und Event-Handler-Attribute werden entfernt.
<link> -Tags mit rel="alternative" werden ebenfalls entfernt (vielleicht sollten sie nicht sein und sollten stattdessen in einer absoluten URL fixiert werden, wenn sie relativ sind).
<iframe> wird derzeit nicht behandelt, und das Attribut src wird auf about:blank gesetzt.
.
Beachten Sie, dass alle Sicherheitsanforderungen für Cross-Site-Skripting aufgehoben werden, sodass alle Ressourcen geladen werden können. Stellen Sie sicher, dass Sie nicht versuchen, schädliche Webseiten zu speichern, während Sie einige geheime Anmeldeinformationen Ihres Facebook-Kontos verwenden:).
.
save_as_html.js Inhalt: