更改时实时重新加载 iframe 脚本答案

【问题标题】：Live reloading iframe script on change更改时实时重新加载 iframe 脚本
【发布时间】：2016-03-28 13:27:12
【问题描述】：

我正在使用 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>

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

这在传递更新值的 de 编辑器的 $scope.$watch 中调用。

【问题讨论】：

标签： javascript angularjs iframe live codemirror

【解决方案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)

【讨论】：