Question

所以我目前正在编写一个带有预览的编辑器，它使用Ace和jQuery生成的iFrame来预览在iFrame中编写的Ace textarea中的编码。它工作正常，但我在那里写的脚本没有加载（特别是谈论jQuery / JS）。

所以这是我的标记：

<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>

这是我的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();
    });

});

我想有一些关于使用jQuery处理jQuery的东西，但我无法弄清楚如何修复它。任何帮助表示赞赏 - 谢谢:)。

修改：Here's an image of what I'm working on

Answer 1

我对此进行了测试并且有效。 Firebug不会在iframe的头部显示脚本标记，但alert（）调用可确保实际加载jQuery。

<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>

这是fiddle。

此thread有类似的主题，因此您可以获得更多有关此内容的反馈。

未在jQuery中加载的脚本生成了iFrame

1 个答案: