0

所以我目前正在开发一个带有预览的编辑器，它使用 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 的东西，但我真的不知道如何修复它。任何帮助表示赞赏 - 谢谢:)。

编辑：这是我正在处理的图像

4

1 回答 1

0

我对此进行了测试，并且有效。Firebug 不会在 iframe 的头部显示 script 标签，但 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>

这是一个小提琴。

这个线程有一个类似的主题，所以你可以得到更多关于这个的反馈。

于 2013-10-30T21:55:38.033 回答