• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Quellcode anzeigen

crazyyzarc

crazyyzarc

Neues Mitglied
Ich möchte über einen Knopf (der aus HTML besteht) den Quellcode der aktuellen Seite im Pop Up Fenster anzeigen mit JavaScript. Gibt es da zu eine Funktion oder fügt man den Code mittels pre-Elements einfach ein. Nachteil: Der Quellcode wird unübersichtlicher .. ich hoffe auf Tipps und Antworten
Danke!
 
Du kannst den Code mittels JavaScript einblenden. Die Vorgehensweise wäre wie folgt:
  1. Reserviere ein Element wie div, table, section, ....mit id="source"aus dem der Code angezeigt werden soll.
  2. Reserviere ein div mit id=target, in dem der Code angezeigt werden soll.
  3. Erstelle eine Schaltfläche zum Anzeigen des Codes, die die folgende Funktion ausführt.
  4. Erstelle eine Funktion, die im wesentlichen folgendes macht:
    • var sourceCode =getElementById('source').innerHTML //Quellcode einlesen
    • var targetCode = Ersetzen der HTML Steuerzeichen wie < > & durch HTML Entiteis
    • getElementById('target').innerHTML = targetCode; //Quellcode anzeigen
Details dazu findest du sicher durch Suchmaschinen. Wie du richtig erkannt hast, wäre eine Kopie nur zum Anzeigen nicht unbedingt optimal. Einen ersten Entwurf mit alert zum Anzeigen anbei.

HTML: 
<!DOCTYPE html>
<html lang="de">
<head>  
    <meta charset='utf-8'>
    <title>Source Test</title>
</head>
<body>
    <div id="source">
        <h1>Test</h1>
        <input id="inp_text" type="text" ><br/>
        <input id="btn_do" type="button" value="Source anzeigen" onclick="alert(document.getElementById('source').innerHTML);">
    </div>
</body>
</html>
 
Zuletzt bearbeitet:
Nun habe ich mal die paar Zeilen noch hinzugefügt, um einen ersten Entwurf im Dokument anzuzeigen.

HTML: 
<!DOCTYPE html>
<html lang="de">
<head> 
    <meta charset='utf-8'>
    <title>Source Test</title>
    <script type="text/javascript">
     
        function showSource() {
            //Quelle einlesen
            var sourceCode = document.getElementById('source').innerHTML;
            //Steuerzeichen ersetzen, noch unvollständig, viele Vorschläge im Netz
            var targetCode =  sourceCode.replace(/</g, "&lt;");
            targetCode     =  targetCode.replace(/>/g, "&gt;");
            //Ausgabe
            document.getElementById('target').innerHTML = targetCode;
        }
     
    </script>
</head>
<body>
    <div id="source">
        <h1>Test</h1>
        <input id="inp_text" type="text" ><br/>
        <input id="btn_do" type="button" value="Source anzeigen" onclick="showSource();">
    </div>
    <pre id="target" style="background-color:lightgrey"></pre>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben