Ausführen von Javascript/jQuery in iframe

Question

Ich arbeite derzeit an einem Web-Editor, wo Sie Ihren HTML-, CSS- und JavaScript-Code eingeben und das Ergebnis in Echtzeit sehen können. Etwas ähnlich wie JSBin oder JSFiddle. (Ich mache das, um einen Offline-Editor zu bekommen)

Ich habe schon viele Probleme durchgemacht, vor allem wenn es um CSS geht, aber ich habe sie gelöst, indem ich einen iframe benutzt habe und meinen ganzen Code hineingesteckt habe. Und das funktioniert erstaunlich gut, bis Sie etwas JavaScript eingeben.

Ich sende den Code zwischen <script></script>, aber im Gegensatz zu CSS wird es nicht ausgeführt. Was sehr seltsam ist, ist, dass, wenn ich etwas wie $('button').css('color', 'red'); eingeben, die Schaltflächen des Editors effektiv betroffen werden, aber nicht diejenigen meines iframe. Genau das Gegenteil von dem, was ich erwartet habe. Ich habe viele Dinge ausprobiert, viele Themen im Forum angeschaut, aber nichts funktioniert. Ich habe auch versucht, eine leere Seite in meinem iframe zu laden. In diesem Fall läuft JavaScript, aber es wird unmöglich, den Code im iframe zu bearbeiten! Was ist los? Wo gehe ich falsch? Vielen Dank im Voraus für Ihre Hilfe!

Hier ist mein Herausgeber: https://jsbin.com/tuqite/edit?html,js,output/

Answer 1

versuchen, den Inhalt des iframe wie diese zu aktualisieren.

// this string contains both html and script 
var html_string= "content"; 
document.getElementById('childFrame').src = "data:text/html;charset=utf-8," + escape(html_string); 

Durch direktes Aktualisieren des Iframe-DOMs, wie Sie es tun, ist möglicherweise nicht der richtige Weg.