如何使用JavaScript在HTML5 iframe中加载/附加jQuery库？

我已经使用Angular JS和老式JavaScript创建了一个简单的代码编辑器，现在我想添加一个代码预览工具

以下是我用来动态创建iframe、将其添加到DOM并填充使其工作所需的元素的代码：

...
function updatePreview() {
    var iFrame, doc, styleElm, jQueryElem, styles, javascript;
    var container, $head, $body;
    var $jsRequirements = [], addditionalJS = [], $cssRequirements = [];

    //set base requirements for iframe element
    $jsRequirements = [
        'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
        'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js',
    ];

    $additionalJS = [
        'js/libs/main.js',
        'js/libs/plugin.slideshow.js'
    ];

    $cssRequirements = [
        'c/theme/jquery-ui-1.8.23.custom.css'
    ];

    //set up a new HTML5 iFrame with basic styling
    iFrame = document.createElement('iframe');
    iFrame.className = "previewPane";
    iFrame.style.height = "100%";
    iFrame.style.width = "100%";

    //append iFrame to previewContainer
    container = document.getElementById('previewPanel');
    container.appendChild(iFrame);

    //init main iFrame content for manipulation
    doc =  iFrame.contentDocument ||  iFrame.contentWindow.document;

    // init the inline style container element
    styleElm = doc.createElement('style');
    styleElm.setAttribute('rel','stylesheet');
    styleElm.setAttribute('type','text/css');
    styleElm.setAttribute('media', 'screen');

    //grab css from CSS code pane
    styles = cssCode.getValue();

    //grab JS from the JS code pane
    javascript = jsCode.getValue();

    //write main HTML code
    doc.open();
    doc.write(htmlCode.getValue());
    doc.close();

    //must add any JS & styling *after* initial html code dump
    $head = doc.getElementsByTagName('head')[0];
    $body = doc.getElementsByTagName('body')[0];

    //init script element and populate 
    //with local jQuery variable declaration 
    //for iFrame script execution
    jQueryElem = doc.createElement('script');
    jQueryElem.setAttribute('type','text/javascript');
    //append the JS from the jsPanel to the same element
    jQueryElem.appendChild(document.createTextNode(javascript));

    //now the javascript
    setupJSReqs($jsRequirements, doc, $head);
    setupJSReqs($additionalJS, doc, $body);

    styleElm.appendChild(document.createTextNode(styles));
    $head.appendChild(styleElm);
    $body.appendChild(jQueryElem);

}

    setTimeout(updatePreview, 300);
});

}

function setupJSReqs(JSArray, container, target) {
    for (var x in JSArray) {
        var jsElem = container.createElement('script');
        jsElem.setAttribute('type','text/javascript');
        jsElem.setAttribute('src', JSArray[x]);
        target.appendChild(jsElem);
    }
}

这段代码在视觉上运行良好（即chrome开发工具将所有元素显示在正确的位置），但我得到一个错误：

**Uncaught ReferenceError: $ is not defined**

我可能错了，但我猜dom没有正确地引入iframe jQuery库。我可以通过var$=parent.$这样的方法来解决这个问题，但这不是一个理想的解决方案

有没有修复错误的建议

---

谢谢

您正在使用DOM操作动态附加

元素。这意味着外部脚本是异步加载的，并且将在（稍后插入的）内联脚本之后执行

要解决此问题，您可以：

• 钩住外部资源的加载事件，并在加载所有外部资源后插入内联脚本
• 对整个页面使用

  doc.write（…）

  ，即在html字符串中插入脚本标记。然后脚本将同步加载和执行

---

您不应该在添加jsCode的地方命名

（来自

javascript

变量）

jquerylem

：-）此外，您忘了向我们展示

setupJSReqs

函数，它似乎完成了令人担忧的任务……谢谢Bergi，也很正确。代码已编辑。我可以整理这个代码很多，我觉得，但现在我希望它显示我的目标！你可以在你的评论上留言吗？为什么我不给我附加代码的脚本命名呢？仅仅因为script元素不包含jQuery源代码，而是JS窗格中的自定义代码-这让人困惑：-）谢谢@Bergi，我选择了第二个选项，它工作得很好！