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

Scripts not loading in jQuery generated iFrame

本文关键字：iFrame 加载 jQuery 脚本      更新时间：2023-09-26

所以我目前正在开发一个带有预览的编辑器，它使用 Ace 和 jQuery 生成的 iFrame 来预览在 iFrame 中的 Ace 文本区域中编写的编码。它工作正常，但我在那里编写的脚本没有加载（特别是谈论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的东西，但我真的不知道如何解决它。任何帮助都值得赞赏 - 谢谢:)。

编辑：这是我正在做的事情的图片

我对此进行了测试，它起作用了。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>

这是一个小提琴。

此

线程具有类似的主题，因此您可以获得更多有关此的反馈。

相关文章：