CODEWITHSUNDEEP
javascriptjqueryhtmliframeedit
Robin Dos Anjos
Robin Dos Anjos

Reputation: 359

Run Javascript/jQuery inside iframe

I'm currently working on a web editor where you can enter your HTML, CSS and JavaScript code and see the result in real time. Something similar to JSBin or JSFiddle. (I'm doing that to get an offline editor)

I've already been through many problems especially when it comes to CSS but I solved them by using an iframe and injecting all my code into it. And that works amazingly well until you type some JavaScript.

I'm sending the code between <script></script> but unlike CSS it won't run. What's very weird is that when I enter something like $('button').css('color', 'red');, the buttons of the editor effectively get affected but not those of my iframe. Exactly the opposite of what I expected. I've tried many things, looked at many topics on the forum, but nothing works. I also tried to load a blank page in my iframe. In that case, JavaScript runs but it becomes impossible to edit the code in the iframe! What's going on? Where am I going wrong? Thank you in advance for your help!

Here's my editor : https://jsbin.com/tuqite/edit?html,js,output/

Upvotes: 0

Views: 1106

Answers (1)

rajesh
rajesh

Reputation: 2523

Try updating the content of the iframe like this.

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

By directly updating the iframe DOM like the way you are doing may not be the right way .

Upvotes: 1

Related Questions