0

So I'm currently working on an editor with a preview where it uses Ace and a jQuery generated iFrame to preview the coding written in the Ace textarea thingy in the iFrame. It works fine, but the scripts that I write there are not loading (specifically talking about jQuery/JS).

So here is my markup:

<div class="box" id="snippet">
    <input type="text" name="name" class="appname" id="appname" placeholder="App name" />
    <div class="snippettext apptext" id="editor">Write code here!</div>
    <textarea id="editorhidden"></textarea>
    <div id="previewcode">

    </div>
</div>

And here is my jQuery/javascript:

$(document).ready(function(){

    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/javascript");
    var $frame = $('<iframe id="previewframe">');
    $('#previewcode').html($frame);
    setTimeout( function() {
        var doc = $frame[0].contentWindow.document;
        var $body = $('body',doc);
        $body.html(editor.getValue());
        $frame.contents().find('body').prepend('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><\/script>').end();
    }, 1 );
    $(".updatepreview").click(function(){
        var doc = $frame[0].contentWindow.document;
        var $body = $('body',doc);
        $body.html(editor.getValue());
        $frame.contents().find('body').prepend('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><\/script>').end();
        $(".loadingimage").hide();
    });

});

I guess there is something about processing jQuery with jQuery, but I can't really figure out how to fix it. Any help is appreciated - thanks :).

Edit: Here's an image of what I'm working on

imp
  • 460
  • 2
  • 7
  • 23
  • Quick guess would be this is by design for security purposes. – Stieffers Oct 30 '13 at 21:45
  • Yes that was my guess as well, but isn't there some way to kind of bypass or allow this? I mean, jQuery is limited, but not very limited in my experience. – imp Oct 30 '13 at 21:47

1 Answers1

0

I tested this and it worked. Firebug doesn't show the script tag in the head of the iframe, but the alert() call ensures that jQuery is actually loaded. 

<p id="foo">
</p>
<script>
$(document).ready(function(){

    var $frame = $('<iframe id="previewframe">');
    $('#foo').html($frame);
    setTimeout( function() {
        var doc = $frame[0].contentWindow.document;
        var $body = $('body',doc);
        $(doc).contents().find("head").append('<scr' + 'ipt type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><\/scr' + 'ipt>');
        // $body.html('<p>content here</p><scr' + 'ipt type="text/javascript">alert(jQuery);<\/scr' + 'ipt>');
        // Instead of putting some random html in the body, put from the editor
       $body.html(editor.getValue());
        }, 1 );
});
</script>

Here is a fiddle.

This thread has a similar subject, so you could get some more feedback on this.

Community
  • 1
  • 1
Tasos K.
  • 7,979
  • 7
  • 39
  • 63
  • Thanks Codingstill, but how can I use this? I mean, I understand breaking up the script tag in the head, but the HTML is loaded from Ace. So should I just find a/the script tag in editor.getValue() and break it into ""? Any idea on how I'll achieve that? – imp Oct 30 '13 at 22:05
  • You could replace the line of code that puts some html in the iframe's body with the one from your snippet. I have made an edit on my answer. – Tasos K. Oct 30 '13 at 22:09
  • This is kind of difficult to explain and I might be misunderstanding you, if so just tell me. So, I fixed the "head" append, so it loads jQuery properly. Now take a look at these really quickly: http://d.pr/i/QaYM - http://d.pr/i/xeoI - http://d.pr/i/w0qY -- As you can see, the jQuery is loaded, but the script tag in the Ace editor isn't loading. – imp Oct 30 '13 at 22:19
  • I am not sure what the problem is. The contents of the body tag in the screenshot are not from the Ace editor? – Tasos K. Oct 30 '13 at 22:29
  • I got them using editor.getValue() so they have to be. Anyways, I'll be back tomorrow, just leave a comment if you fix it :) Thanks for all the help. – imp Oct 30 '13 at 23:05
  • Again I am not getting what the problem is but it seems as a different problem than the one this thread describes (which is answered), so maybe it would be better to make a new question and get more people to see it? – Tasos K. Oct 31 '13 at 08:57