Wie kann ich das Fenster "Quelltext anzeigen" programmatisch öffnen (mit Hilfe von Javascript), so wie wenn ich im Browser mit der rechten Maustaste klicke und "Quelltext anzeigen" anklicke? Ist dies möglich?
Antworten
Zu viele Anzeigen?
Sie können das URI-Schema "view-source" verwenden, das von Firefox, Chrome und älteren Versionen des IE unterstützt wird.
Kein JavaScript erforderlich, nur ein normaler Link zu der Seite, die der Benutzer in der Quellansicht sehen soll:
<a target="_blank" href="view-source:http://www.wikipedia.org/">view Wikipedia's home page HTML source</a>Mehr Informationen:
Pim Jager
Punkte
31389
Mit diesem Skript können Sie einfach das innerHTML des Html-Tags abgreifen, neu einfügen und in ein Popup einfügen.
function showSource(){;
var source = "<html>";
source += document.getElementsByTagName('html')[0].innerHTML;
source += "</html>";
//now we need to escape the html special chars, javascript has escape
//but this does not do what we want
source = source.replace(/</g, "<").replace(/>/g, ">");
//now we add <pre> tags to preserve whitespace
source = "<pre>"+source+"</pre>";
//now open the window and set the source as the content
sourceWindow = window.open('','Source of page','height=800,width=800,scrollbars=1,resizable=1');
sourceWindow.document.write(source);
sourceWindow.document.close(); //close the document for writing, not the window
//give source window focus
if(window.focus) sourceWindow.focus();
} Damit wird der Quelltext nicht vollständig angezeigt, da nichts außerhalb der HTML-Tags und keine Eigenschaften innerhalb des HTML-Tags angezeigt werden, aber es sollte ausreichen, und es funktioniert browserübergreifend.
Der Vorteil dieser Lösung gegenüber der view-source:-Lösung ist, dass sie auch im Internet-Explorer 6> unter Windows XP SP2 funktioniert, das war's auch schon. Wenn keiner Ihrer Zielgruppe in dieser Gruppe ist, gehen Sie mit der Ansicht-Quelle-Option, seine Art einfacher.
ekim
Punkte
31
Dies gilt für Antworten, die die view-source: Schema
javascript:void(window.open('view-source:'+location.href))Ein Bookmarklet, das dies ermöglicht, kann über den Link in dieser ScURIple erstellt werden:
data:text/html;charset=utf-8,<html>
<a href="javascript:void(window.open('view-source:'+location.href))">view-source</a>
</html>Ein solches Bookmarklet kann auf jeder Seite mit einem URI eines beliebigen Schemas verwendet werden und nicht nur http: oder Seiten, die HTML basiert (und daher keine Eigenschaften wie .innerHTML ).
Daher der URI für (diese scURIples sind für die sofortige Darstellung geeignet):
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABnElEQVQ4jWNgwAMaGBiYHqdqT36SpvP/carOgdueKuz41OM2JE177ZM0nf+PUrUXkmwAAwMDw91QJf7HKTqnn6Tp/H+UplNNUMOrqaw5r6ew1D2fxCAKE3uYpKv0OEX3KdQlETg1P+5j4Hw9he3q66ls/19NZX35agpLzcsJDOIMDAwMj5O1zR6n6P54nKb942GqpgtWAxoaGJheTWVQeTeNqe31VJbPUINev5rB0ny/gUHgSbaqz5Mk/T+Pk3UbCXrlQT+D5NupTE3vpjG9fTOV9f+racxvXvZzND0tk/JrYGBgwtCwqtCSc3WFQ/GqEqfAZYWO2vMTFDgYGBgYrjaI8jybyFn0bhrTo3fTmf6/mc4gjdXGVcW2WmsrHP/D8OpypzcrS10OrC53bN1QaRVypFkj6FaPSCROJ88sd+FfV2YdtKHCrmV9he3ODeW29zZU2P1fX2H/f2254//VZU7/VxY72WFozM3J+Z+bk/Mfq6HFviJzy31tFld4payscJ44s8BdEkM9sgCMjQtjtZCqBhADcBpAKqaKAQB1iiloT36niAAAAABJRU5ErkJggg==kann direkt mit untersucht werden:
view-source:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABnElEQVQ4jWNgwAMaGBiYHqdqT36SpvP/carOgdueKuz41OM2JE177ZM0nf+PUrUXkmwAAwMDw91QJf7HKTqnn6Tp/H+UplNNUMOrqaw5r6ew1D2fxCAKE3uYpKv0OEX3KdQlETg1P+5j4Hw9he3q66ls/19NZX35agpLzcsJDOIMDAwMj5O1zR6n6P54nKb942GqpgtWAxoaGJheTWVQeTeNqe31VJbPUINev5rB0ny/gUHgSbaqz5Mk/T+Pk3UbCXrlQT+D5NupTE3vpjG9fTOV9f+racxvXvZzND0tk/JrYGBgwtCwqtCSc3WFQ/GqEqfAZYWO2vMTFDgYGBgYrjaI8jybyFn0bhrTo3fTmf6/mc4gjdXGVcW2WmsrHP/D8OpypzcrS10OrC53bN1QaRVypFkj6FaPSCROJ88sd+FfV2YdtKHCrmV9he3ODeW29zZU2P1fX2H/f2254//VZU7/VxY72WFozM3J+Z+bk/Mfq6HFviJzy31tFld4payscJ44s8BdEkM9sgCMjQtjtZCqBhADcBpAKqaKAQB1iiloT36niAAAAABJRU5ErkJggg==---------------------------------------------------------------------
Hinweis : Das obige Bookmarklet ist ein Widerspruch in sich und überflüssig, da im Allgemeinen Browser, die das view-source: Schema (Protokoll) direkt in die Benutzeroberfläche implementieren - allerdings sind einige Schnittstellen stark verkrüppelt, weshalb dieses Lesezeichen vor allem bei der Verwendung notwendig ist:
window.navigator.userAgent=
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4
(Splashtop-v1.2.17.0)Die Splashtop "Instant On" (nicht) Umgebung von Device VM amputiert FF ernsthaft.
(Hinweis: Lesezeichen
<a href="javascript:void(window.open('view-source:file:///'))">
use view-source to traverse and peruse Splashtop system files</a>um die Splashtop-Verzeichnisstruktur zu durchsuchen, d.h. im Allgemeinen: view-source:file://media/ )
---------------------------------------------------------------------
der Teufel hat mich dazu gezwungen - ich kann nicht widerstehen, das zu erklären:
... dieser Link (sic
view-source:) kann auf jeder Seite mit einem URI eines beliebigen Schemas verwendet werden ...
einschließlich sich selbst, die URI beachten:
view-source:view-source:view-source:view-source:view-source:about:blankerzeugt einen offensichtlichen HTML-Quelltext und damit hat eine .innerHTML Eigenschaft
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title></title></head><body></body></html>sondern
view-source:view-source:view-source:view-source:view-source:about:logoist keine HTML-Quelle und daher hat nicht eine .innerHTML Eigentum.
In Bezug auf
ein URI eines beliebigen Schemas:
view-source:jar:, view-source:chrome:, view-source:place:, ... ?Vermutlich ist das grundsätzlich so - solange der Browser kann eine Seite mit einer URI wiedergeben mit einem bestimmten Schema, dann muss diese Seite eine interpretierbare Quelle haben, die ohne interpretiertes Rendering angezeigt werden kann, ergo anzeigbar ist.
(d.h.. view-source:place:... ergibt keine brauchbare Seite, aber das tut auch eine place:... URI, obwohl eine solche URI mit Lesezeichen versehen werden kann - zumindest mit FF [ v.>3.04? ] )
also ...
<a href='view-source:javascript:with(document){write(42);close();}' >v-s:js: answer</a>
<a href= 'javascript:with(document){write(42);close();}' >js: question</a>
stpe
Punkte
3541
Nicht registrierter Benutzer
Punkte
0
Es gibt 2 Optionen [und eine Umgehung, die ich später erläutern werde ]
1. "HTML" von D.O.M
//get HTML from DOM (not really HTML from the server but an interrupted one - the plus is that it is immediate to fetch).
(function(){
"use strict";
var d = document.createElement("div");
d.style.cssText = "max-width:500px; max-height:200px; background-color:rgba(223,223,223,.7); border:3px solid rgba(0,0,0,.5); padding:5px; margin:10px; overflow-x:hidden; overflow-y:auto; word-break:break-word; font-family:'Courier New',Consolas,Lucida Console,monospace,sans-serif; text-shadow:.3px .3px rgba(0,0,0,.2),-0.3px -0.3px rgba(0,0,0,.2); border-radius:5px; box-shadow:1px 1px 5px rgba(0,0,0,.3),-1px -1px 5px rgba(0,0,0,.3)";
d.appendChild(document.createTextNode(document.querySelector('html').innerHTML));
document.querySelector('body').appendChild(d);
}());dies ist das "sichere" Ergebnis, ohne die <html> Umhüllung und doctype : 
2. HTML vom Server (durch "Self-Ajax")
//get HTML from server, its the real-deal, but requires internet-connection (again...), since its the same-page you are OK to Ajax (domain wise..)
(function(){
var xhr = new XMLHttpRequest();
xhr.responseType = "text";
xhr.onreadystatechange = function(e){
var
xhr = e.target
, d = document.createElement("div")
;
if(xhr.DONE !== xhr.readyState) return;
d.style.cssText = "max-width:500px; max-height:200px; background-color:rgba(223,223,223,.7); border:3px solid rgba(0,0,0,.5); padding:5px; margin:10px; overflow-x:hidden; overflow-y:auto; word-break:break-word; font-family:'Courier New',Consolas,Lucida Console,monospace,sans-serif; text-shadow:.3px .3px rgba(0,0,0,.2),-0.3px -0.3px rgba(0,0,0,.2); border-radius:5px; box-shadow:1px 1px 5px rgba(0,0,0,.3),-1px -1px 5px rgba(0,0,0,.3)";
d.appendChild(document.createTextNode(xhr.responseText));
document.querySelector('body').appendChild(d);
}
xhr.open("GET", String(window.location.href), true);
xhr.send();
}());Ich habe beides in der Konsole ausgeführt, in dieser aktuellen Seite (natürlich bevor ich diese Antwort geschrieben habe )
und hier ist das Ergebnis nebeneinander, man beachte den Unterschied.
Notizen und so..:
- können Sie die html's verwenden
outerHTML(ist aber nicht immer in jedem Standard-DOM verfügbar) - Entlastung des Servers durch dynamische Kompilierung/Rendering des Seitenquelltextes auf der Client-Seite mit Schnurrbart o Lenker .
- können Sie den Text der Seite vor (den meisten) Änderungen in der Datei
localStorageForken Sie den obigen Code und erstellen Sie ein kleines (und wunderbares) Skript, platzieren Sie dieses Skript in der Seiteheadkurz bevor Sie mit der Änderung des Seitenquelltextes beginnen.
- See previous answers
- Weitere Antworten anzeigen
