0
jQueryが正しく動作しているiframeを持つ静的ページがあるとき。しかし、私が動的に正確に同じhtmlを生成する場合、jqueryはそうではありません。 chromeの要素を調べて、動的に生成されたiframeの内容をコピーして静的なページとして保存すると、機能します。動的にコンテンツをiframeに挿入する - jqueryが動作しない
静的& jQueryのに動作します：
test.htmlという：
...
<iframe name="result" sandbox="allow-popups allow-scripts allow-same-origin allow-modals" frameborder="0" marginwidth="0" marginheight="0" src="/iFrame" width="100%" height="900px"></iframe>
...
Iframe.htmlの：
<html>
<head>
<script type="text/javascript" src="/javascripts/jquery-3.1.0.min.js"></script>
<style type="text/css">.test { display:inline-flex; padding-top:10px; padding-bottom: 10px; padding-left: 40px; padding-right: 40px; background-color:rgb(50,100,230); color:white; justify-content:center; align-items:center; font-size:20pt; font-weight:lighter; font-family: sans-serif }</style>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {$('.test').text('hello');});
//]]>
</script>
<style type="text/css">.iFrameStyle: { margin:10px; }</style>
</head>
<body class="iFrameStyle">
<div class="test">test</div>
</body>
</html>
結果 ： 
動的このiFrameを生成 - jQueryのは、IFRAMEの
クロムインスペクタ
<html>
<head>
<script type="text/javascript" src="/javascripts/jquery-3.1.0.min.js">
</script>
<style type="text/css">
.test { display:inline-flex; padding-top:10px; padding-bottom: 10px; padding-left: 40px; padding-right: 40px; background-color:rgb(50,100,230); color:white; justify-content:center; align-items:center; font-size:20pt; font-weight:lighter; font-family: sans-serif }
</style>
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
$('.test').text('hello');
});
//]]>
</script>
<style type="text/css">.iFrameStyle: { margin:10px; }</style>
</head>
<body class="iFrameStyle"><div class="test">test</div></body></html>
結果（ハローなければならない）
方法ロードに失敗しますiframeコンテンツはdynamicallです生成されたY：
function showPreview() {
var button = $('.createComponentPreview');
var update = $('.updateComponentPreview');
update.fadeIn();
//set the name above the card
var name = $('.componentName').val();
if (name === '') {
name = $('.componentTempName').text();
}
$('.componentNameVal').text(name);
//set the iframe contents
var sandbox = $('.sandboxed');
var html = $('textarea[name="html"]').val();
var css = $('textarea[name="css"]').val();
var js = $('textarea[name="js"]').val();
//remove any previous content
var head = sandbox.contents().find('head');
var body = sandbox.contents().find('body');
head.empty();
body.empty();
//insert
var htmlContainer = document.createElement('div');
var cssContainer = document.createElement('style');
var jsContainer = document.createElement('script');
jsContainer.setAttribute('type', 'text/javascript');
cssContainer.setAttribute('type', 'text/css');
var iFrameStyle = $(cssContainer).clone();
$(head).append(cssContainer);
$(head).append(jsContainer);
$(html).append(htmlContainer);
$(cssContainer).text('\n\t'+css+'\n');
$(head).append(iFrameStyle);
iFrameStyle.append('.iFrameStyle: { margin:10px; }');
//append any environment scripts
for (var i in componentOptions) {
if (componentOptions[i] == 'jquery') {
head.prepend('<script type="text/javascript" src="/javascripts/jquery-3.1.0.min.js"></script>');
js = '$(document).ready(function() {'+js+'});';
}
else if (componentOptions[i] == 'react') {
head.prepend('<script type="text/javascript" src="react-dom.min.js"></script>');
head.prepend('<script type="text/javascript" src="react.min.js"></script>');
}
else if (componentOptions[i] == 'noMargin') {
iFrameStyle.append('.iFrameStyle { margin:0px; }');
}
else if (componentOptions[i] == 'alignCenter') {
iFrameStyle.append('.iFrameStyle { display:flex; justify-content:center; align-items:center }');
}
}
body.removeAttr('marginwidth').removeAttr('marginheight');
body.addClass('iFrameStyle');
body.prepend(html);
$(jsContainer).text('//<![CDATA[\n'+js+'\n//]]>\n');
sandbox.css('min-height', '300px');
sandbox.css('width', '100%');
var card = $('.contentContainer.expandable').fadeIn();
button.text('Close Preview');
button.attr('previewMode', 'true');
}
私は取得していますエラーメッセージ：
ReferenceError: $ is not defined
をして、このエラーにChromeのデベロッパーコンソール内のリンクを示しています
//<![CDATA[
$(document).ready(function() {$('.test').text('hello');});
//]]>
両方の作業静的で動的な非動作iframeは両方ともjqueryと全く同じURLを含んでいますが、404エラーは表示されません。
私はこれに固執しているので、何か助けに感謝します！
ありがとうございます！
