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

Live reloading iframe script on change

本文关键字：加载 iframe 脚本 新加载 实时      更新时间：2023-09-26

我正在用HTML、CSS和JS代码设置一些编辑器。当iframe发生更改时，每个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;
        });});

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

已解决：

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

        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中调用的$监视de-editors传递更新的值。

编织：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)
相关文章：