我试图在我的网页上复制 jsfiddle 的功能 - 用户可以在页面上提交 js，它将在 iframe 中执行。我在 jsfiddle 和我的页面上运行了一些测试代码。它可以在 jsfiddle 中运行，但不能在我的页面上运行。如有任何帮助，我们将不胜感激!
我的页面渲染了 css 和 html，但 js 没有执行(div 背景应该是蓝色):
这是 fiddle 的 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
最佳答案
执行发生在 $(jsContainer).text(js) 行，但 html 尚未插入。
您只需将行 $(jsContainer).text(js) 移到 body.prepend(html) 之后(没有 onload 事件) )。
关于javascript - 将 js 插入 iframe 无法按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39210880/