ライブのリロードiframeスクリプトを変更しました

Question

HTML、CSS、JSコードのエディタをいくつか設定しています。それぞれのコードはiframeに変更があったときにリロードされます。 HTMLとCSSのコードを完全にリロードすると、iframeの本体にあるスクリプトの内部に挿入されたJSコードが動作していません。更新された後に再実行されないので可能ですが、

ここで

がPlunker http://plnkr.co/edit/tpl:8rFfZljYNl3z1A4LKSL2?p=previewに例を示します

HTML

<div class="result"> 
    <!-- RESULT --> 
    <style id="style"></style> 
    <script id="script"></script> 
    <script id="jQ" type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script> 

    <iframe id="view" class="view"></iframe> 
</div> 

JS

var app = angular.module('plunker', []);app.controller('MainCtrl', function($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 = '<div id="test">Testing</div>'; 
    $scope.js = 'console.log("More test");'; 


     head.appendChild(jQ); 
     head.appendChild(loadScript); 
     head.appendChild(style); 
     body.appendChild(script); 


     $scope.$watch('html', function(nv){ 
      body.innerHTML = nv; 
      body.appendChild(script); 
     }); 

     $scope.$watch('js', function(nv){ 
      script.innerHTML = nv; 
     });}); 

注：コードは、SOLの手によって設定されている

---

正常に動作するようですVED：

私は道を見つけました。ここでは、コードは他のケースの誰かにあります

 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(); 
    } 

がこれは$スコープで呼び出されます。更新された値を渡すデ・エディタの$時計、それを必要とします。

Answer 1

織り：http://kodeweave.sourceforge.net/editor/#b6b39c95ec91f42950957a1ac8dc707f

私はあなたの問題を解決することができました参照しかし、私はマイナーな提案を持っています。

ユーザーはそうのようなのsetTimeoutかのsetIntervalを使用している場合...あなたのコードを持っている

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

問題は、それが元literationに追加されますであり、この場合、あなたの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)