Anzeige externen Javascript-Inhalt als Text in HTML-Seite

Question

Ich versuche, Javascript-Code, der mit der HTML-Seite mit einem Skript-Tag als Text auf der gleichen HTML-Seite (und auch Syntax hervorgehoben) als ein Werkzeug für die Benutzer zu sehen angezeigt wird der zugrunde liegende JavaScript-Code.

Schließlich möchte ich auch die HTML- und CSS-Datei Inhalte als ein Lernwerkzeug anzuzeigen, so dass Benutzer alle Komponenten auf eine benutzerfreundliche Weise auf der gleichen Seite (unten in einem Registerkarten-Steuerelement) sehen können.

Die andere Voraussetzung ist, dass die Dateien lokal sind und nicht auf einem Webserver gespeichert sind. Und zu guter Letzt möchte ich das so einfach wie möglich halten (keine jQuery, kein zusätzliches Javascript wenn möglich).

Ich habe ein paar Ansätze ohne viel Erfolg versucht:

• mit HTML5 Import und AJAX, begegnet CORS und Zugriff auf lokale Dateien Fehler
• HTML5-Tag einbetten, traf prompt Javascript auszuführen, nicht gut
• iframe-Tag, traf prompt Javascript auszuführen, nicht gut

ich für eine einfache und funktionierende Lösungen suchen, ich hav Ich habe ein wenig gesucht, aber es ist schwierig, etwas zu finden, wo man Javascript in einfachen Text "konvertieren" und auf einer HTML-Seite anzeigen möchte.

Answer 1

Die Extraktion des src-Attributs aus dem Skriptelement und das Laden des Dateiinhalts über einen separaten HTTP-Aufruf ist wahrscheinlich die praktikabelste Lösung.

Ein Beispiel für die lodash Quellcode, mit jQuery:

var src = $('#lodash').attr('src'); 
 

 
$.get(src, undefined, function(data) { 
 
    $('#content').text(data); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script id='lodash' src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.js'></script> 
 

 
<pre id='content'></pre>