Question

我正在使用HTML，CSS和JS代码设置一些编辑器。当iframe发生变化时，每个代码都会在iframe中重新加载。 HTML和CSS代码重新加载完美，总是在iframe体内的脚本中注入的JS代码无法正常工作，因为它一旦更新就不会重新运行，但我没有＆＃39我知道怎么做......

有什么想法吗？

这是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;
        });});

注意：手动设置时，代码似乎运行良好

解决：

我找到了解决方法。这是代码以防其他人需要它

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

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

Answer 1

编织：http://kodeweave.sourceforge.net/editor/#b6b39c95ec91f42950957a1ac8dc707f

我看到你能够解决你的问题，但我有一个小建议。

如果用户使用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)

更改

1 个答案: