在iframe中插入js不像预期的那样工作
在iframe中插入js不像预期的那样工作
提问于 2016-08-29 16:25:47
我正试图在我的网页上复制jsfiddle的功能--用户可以在页面上提交js，并且它将在iframe中执行。我在jsfiddle和我的页面上运行了一些测试代码。它适用于弹琴，但在我的页面上就不行了。任何帮助都是非常感谢的！
我的页面呈现css和html，但js没有执行( div背景应该是蓝色的)：
这里是 小提琴 (工作)：的iframe中的html
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
.test { display:inline-flex; padding:40px; background-color:#cccccc }
</style>
<title></title>
<script type="text/javascript">//<![CDATA[
window.onload=function(){
document.querySelector('.test').style.backgroundColor="rgb(21, 160, 249)";
}//]]>
</script>
</head>
<body>
<div class="test" style="background-color: rgb(21, 160, 249);">test</div>
</body></html>这里是我的网页的输出：
<html><head><style>
.test { display:inline-flex; padding:40px; background-color:#cccccc }
</style><script type="text/javascript">//<![CDATA[
window.onload=function(){
document.querySelector('.test').style.backgroundColor="rgb(21, 160, 249)";
}//]]>
</script></head><body><div class="test">test</div></body></html>将html、css和js插入iframe:中的代码。
$(document).ready(function() {
var codeContainer = document.querySelector('.executedCode'); //submitted code passed as values in attributes to hidden div on the page in node/express environment
var html = codeContainer.getAttribute('html');
var css = codeContainer.getAttribute('css');
var js = codeContainer.getAttribute('js');
var sandbox = $('.sandboxed');
sandbox.ready(function() {
var htmlContainer = document.createElement('div');
var cssContainer = document.createElement('style');
var jsContainer = document.createElement('script');
jsContainer.setAttribute('type', 'text/javascript');
var head = sandbox.contents().find('head');
var body = sandbox.contents().find('body');
$(head).append(cssContainer);
$(head).append(jsContainer);
$(html).append(htmlContainer);
$(cssContainer).append('\n\t'+css+'\n');
$(jsContainer).text('//<![CDATA[\nwindow.onload=function(){\n'+js+'\n}//]]>\n');
body.prepend(html);
});
});window.onload似乎是关键：
我只是通过插入一个警报来运行一个测试。这是成功的和不成功的。
$(jsContainer).text("alert('hi')"); //--works
$(jsContainer).text('//<![CDATA[\nalert("hi");\n//]]>\n'); //-- works
$(jsContainer).text('window.onload=function(){\nalert("hi");\n}\n'); //-- doesn't work回答 1
Stack Overflow用户
回答已采纳
发布于 2016-08-30 13:39:20
执行发生在行$(jsContainer).text(js)上，但html尚未插入。您只需要将行$(jsContainer).text(js)移到body.prepend(html)之后(没有onload事件)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39210880
复制相关文章
相似问题
腾讯云开发者
