![](/img/trans.png)
[英]How do I load a webpage inside a div using Javascript without IFRAME and JQuery?
[英]How do I use JavaScript to load/append jQuery libraries inside an HTML5 iframe?
我使用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 dev工具顯示正確位置的所有元素)但是我收到一個錯誤:
**Uncaught ReferenceError: $ is not defined**
我可能是錯的,但我猜測dom沒有正確地拉入iframe jQuery庫。 我可以通過像var $ = parent這樣的東西來解決這個問題。但是這不是理想的解決方案。
任何修復錯誤的建議??
謝謝
您正在使用DOM操作動態附加<script>
元素。 這意味着外部腳本是異步加載的 - 並且將在(稍后插入的)內聯腳本之后執行。
要解決此問題,您可以:
doc.write(…)
, doc.write(…)
腳本標記插入到html字符串中。 然后腳本將同步加載和執行。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.