是否可以动态重新加载 JS 脚本文件？

Question

我们正在考虑使用 Blockly 让高级用户能够以非编码的沙盒方式设计业务规则。

当他们编辑图表以重新生成新的 JS 代码时，我想将其重新加载到浏览器中。一方面是，如果代码保存为外部 JS 脚本，我如何在不刷新整个页面的情况下在浏览器中重新加载它？

Answer 1

尽管您的解释非常混乱，但我会尽量坚持标题并提供一个示例，说明您如何动态地 re-load 特定的 JS 文件（如果不是您想要的，我们深表歉意因为，但是你最好 re-write 你的问题）。

我猜你没有经常搜索 Google，因为在这个 SO answer 中你找到了如何 re-load 一个 JS 文件：

function reloadJs(src) {
    src = $('script[src$="' + src + '"]').attr("src");
    $('script[src$="' + src + '"]').remove();
    $('<script/>').attr('src', src).appendTo('body');
}

正如用户指出的那样，您可以删除旧标签，但是代码运行time 应该已经完成了。您只需要调用指定源地址的函数。

这实际上会重新加载文件，但您想要传递一些修改，因此您需要运行在 server-side 上根据您的需要提供文件的脚本。您可以在您的 JS 重新加载中将信息指定为 GET 参数，例如 ‘?parameter1=data1&parameter2=data2’.

但是，我不建议这样做，我认为 JS 代码应该改为调用 AJAX 来修改其行为，而不是重新加载整个文件。但这取决于你。

编辑

如果我没理解错的话，你实际上想做的是给客户端实际的 JS 代码，而不是运行服务器中的文件，根据他们设计的一些图表最终会构建到 JS 代码中。然后你可以做的是有一个 <div> 标签，里面有一个 <pre><code> 标签，其内容通过 AJAX 调用被 jQuery 改变。

那么您实际上不应该将 JS 文件作为脚本加载，因为那样会使浏览器执行它。你要做的是这样的：

index.html

<div>
    <pre>
        <code id=“myCode”>
            Your JS file will show soon.
        </code>
    </pre>
</div>

来自 jQuery 文档：

script.js

var jqxhr = $.get( "myFile.js", function(data) {
  $(“#myCode”).html(data)
})
  .done(function() {
    alert( "second success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "finished" );
  });

您显然必须在 HTML 文件中引用 JS 文件，否则它不会加载。您可以将其封装在一个函数中，并根据您的方便调用它。

是否可以动态重新加载 JS 脚本文件？

Is it possibly to re-load a JS script file dynamically?

javascript

eval

blockly

index.html

script.js