Question

我们有一些软件可以重新创建javascript文件。我们需要能够在不刷新页面的情况下将它们重新加载到DOM中。这意味着原始javascript文件（已由浏览器加载）已更改。通常刷新浏览器会解决这个问题，但由于其他控件中的状态丢失，我们无法做到这一点。

我对此的搜索只返回了使用javascript刷新浏览器的结果，这不是我想要的。

是否可以重新加载javascript文件而无需使用JavaScript刷新浏览（没有JQuery / Angular或任何第三方库/框架等）？

Answer 1

如果您打算提供数据或新小部件：

Vanilla AJAX简单而无处不在。那样做。

如果您不喜欢这种情况，无论出于何种原因，如果您只是从控制的框中提取新数据，您还可以尝试JSONP。

var s = document.createElement('script');
s.src = 'path/to/script-that-injects-data-or-NEW-widgets.js';
document.body.appendChild(s);

如果您打算“升级”页面或替换功能：

不要这样做。虽然您可以轻松添加新脚本，但如果没有很多的簿记，您就无法可靠地“清理”旧脚本或变量的页面。除非您的脚本非常非常 简单，否则您可以遇到不小的麻烦。

更好的解决方案是通知用户升级，让他们刷新页面，并确保您的应用可以快速重新初始化到之前的状态。

最终，如果您想要就地“升级”应用程序，那么无论如何您都需要在幕后刷新所有内容。这意味着您需要知道如何重建所有内容以匹配现有/先前状态。并且，可以执行此操作。但是，刷新页面会更容易，这样可以更好地确保干净，兼容的状态，而不会有太多麻烦。

Answer 2

有可能。

查看lite-server：

仅为服务于Web应用程序的轻量级开发节点服务器，在浏览器中打开它，在html或javascript更改时刷新，使用套接字注入CSS更改，并在找不到路由时具有后备页面。

它在内部使用BrowserSync，其中：

...在每个通过WebSockets与服务器通信的页面中注入一个小脚本。当事件发生时 - 例如文件修改或滚动操作 - 服务器会向所有连接的设备发送更新通知。

如果你不能使用第三方代码，你可以自己重新实现。

Answer 3

function loadScript(src, callback)
{
  var script,
      scriptTag;
  script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = src;
  script.onload = script.onreadystatechange = function() {
    if (!this.readyState || this.readyState == 'complete' )
    {
      callback();
    }
  };
  scriptTag = document.getElementsByTagName('script')[0];
  scriptTag.parentNode.insertBefore(script, sriptTag);
}

Answer 4

添加另一个＆lt; script src =“xxx”/＆gt;标记到页面底部。它应该加载js并“覆盖”前一个脚本中定义的对象。

如何在不刷新页面的情况下重新加载javascript

4 个答案: