Javascript 更改时实时重新加载iframe脚本

我正在用HTML、CSS和JS代码设置一些编辑器。当iframe发生更改时，它们中的每一个的代码都会重新加载到iframe中。HTML和CSS代码可以完美地重新加载，但是注入iframe主体中脚本内部的JS代码不起作用，可能是因为它在更新后不会重新运行，但我不知道怎么做

有什么想法吗

这是普朗克的一个例子

HTML

JS

var-app=angular.module（'plunker'，[]）；app.controller（'MainCtrl'，函数（$scope）{
var style=document.getElementById（'style'）；
var script=document.getElementById（'script'）；
var jQ=document.getElementById（'jQ'）；
var view=document.getElementById（'view'）；
var viewDocument=view.contentDocument | | view.contentWindow.document；
var body=viewDocument.getElementsByTagName（'body'）[0]；
var head=viewDocument.getElementsByTagName（'head'）[0]；
var-widgets=[]；
var loadScript=document.createElement（'script'）；
loadScript.innerHTML=“var$=parent.$；console.log（'loaded'）；”；
$scope.html='Testing'；
$scope.js='console.log（“更多测试”）；'；
头.附肢儿童（jQ）；
head.appendChild（loadScript）；
头。附属物（样式）；
body.appendChild（脚本）；
$scope.$watch（'html'，函数（nv）{
body.innerHTML=nv；
body.appendChild（脚本）；
});
$scope.$watch（'js'，函数（nv）{
script.innerHTML=nv；
});});

注意：手动设置时，代码似乎运行正常

---

已解决：

我找到了一条路。这是代码，以防其他人需要

        setTimeout(updatePreview(codeHTML, codeCSS, codeJS), 300);

    function updatePreview(codeHTML, codeCSS, codeJS) {
        var view = document.getElementById('view');
      var viewDocument = view.contentDocument || view.contentWindow.document;

        var codeHTML = (codeHTML === undefined) ? '' : codeHTML;
        var codeCSS = (codeCSS === undefined) ? '' : codeCSS;
        var codeJS = (codeJS === undefined) ? '' : codeJS;

        viewDocument.open();
        viewDocument.write('<style type="text/css">' + codeCSS + '</style>');
        viewDocument.write('<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>');
        viewDocument.write(codeHTML);
        viewDocument.write('<script type="text/javascript">' + codeJS + '</script>');
        viewDocument.close();
    }

setTimeout（updatePreview（codeHTML，codeCSS，codeJS），300）；
函数updatePreview（codeHTML、codeCSS、codeJS）{
var view=document.getElementById（'view'）；
var viewDocument=view.contentDocument | | view.contentWindow.document；
var codeHTML=（codeHTML==未定义）？“”：codeHTML；
var codeCSS=（codeCSS==未定义）？“”：codeCSS；
var codeJS=（codeJS==未定义）？“”：codeJS；
viewDocument.open（）；
viewDocument.write（“”+codeCSS+“”）；
viewDocument.write（“”）；
write（代码HTML）；
viewDocument.write（“”+codeJS+“”）；
viewDocument.close（）；
}

这在$scope中调用。$watch of de editors传递更新值。

Weave:

我知道你能解决你的问题，但我有一个小建议

如果用户像这样使用setTimeout或setInterval

setInterval((function() {
  return $('body').css('background', newGradient())
}), 1000)

您的代码中存在的问题是，它将添加到原始的读写中，而在这种情况下，您的setInterval函数将添加到上一个

因此，一个好主意是动态创建iframe并在其中添加代码。这样，您可以更好地控制添加到iFrame的内容以及如何处理它

document.querySelector(".preview").innerHTML = ""
var frame = document.createElement("iframe")
frame.setAttribute("id", "preview")
frame.setAttribute("sandbox", "allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts")
document.querySelector(".preview").appendChild(frame)

编织：

我知道你能解决你的问题，但我有一个小建议

如果用户像这样使用setTimeout或setInterval

setInterval((function() {
  return $('body').css('background', newGradient())
}), 1000)

您的代码中存在的问题是，它将添加到原始的读写中，而在这种情况下，您的setInterval函数将添加到上一个

因此，一个好主意是动态创建iframe并在其中添加代码。这样，您可以更好地控制添加到iFrame的内容以及如何处理它

document.querySelector(".preview").innerHTML = ""
var frame = document.createElement("iframe")
frame.setAttribute("id", "preview")
frame.setAttribute("sandbox", "allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts")
document.querySelector(".preview").appendChild(frame)