JavaScript를 사용하여 HTML5 iframe에서 jQuery 라이브러리를로드/추가하는 방법은 무엇입니까?

Angular JS & 구식 JavaScript를 사용하여 간단한 코드 편집기를 만들었으며 코드 미리보기 기능을 추가하려는 단계에 있습니다.JavaScript를 사용하여 HTML5 iframe에서 jQuery 라이브러리를로드/추가하는 방법은 무엇입니까?

여기에 내가 동적으로 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); 
    } 
}

(즉, 크롬 개발 도구가 모두 표시

**Uncaught ReferenceError: $ is not defined**

내가 틀릴 수도 있지만, 내가 DOM을 올바르게은 iframe jQuery 라이브러리 당기는되지 않은 추측하고있어 다음 올바른 위치에있는 요소)하지만 난 오류가 발생합니다. 나는 var $ = parent. $와 같은 것으로 이것을 얻을 수 있지만, 이상적이지는 않다.

오류를 수정하기위한 제안 ??

감사

출처

2012-08-22 alfonsogrondo

당신의 이름을해서는 안'

JavaScript를 사용하여 HTML5 iframe에서 jQuery 라이브러리를로드/추가하는 방법은 무엇입니까?

관련 문제