如何实现在浏览器中获取/执行 JavaScript 文件的函数“getScript”？

在本文中，我们将学习如何使用 JavaScript 和 HTML 获取 JavaScript 文件 (.js) 并将其动态加载到 Web 浏览器中。我们需要一个网络浏览器，即 Chrome（推荐）或 Electron 应用程序。有时我们需要根据用户界面的要求在文档中添加脚本，这在默认页面加载时无法完成。

本文是关于从文档对象模型中的任何 jQuery (CDN) 链接或 React 文件获取 JS 文件的全部内容。

方法 ：

1. 创建一个新的脚本元素。

   let newscript = document.createElement('script');

2. 为新创建的脚本元素提供源。

   newscript.src = document.getElementById("source").value;

3. 将元素附加到 DOM 头中，以便它可以执行脚本。

   document.head.appendChild(newscript)

上述方法在下面的示例中通过将以下文件资源视为动态加载的示例脚本来实现。

资源：您可以在输入字段中使用此 CDn 链接来获取。

• jQuery CDN：

  https://code.jquery.com/jquery-3.5.1.js 

• 反应 CDN：

  https://unpkg.com/react@17/umd/react.development.js
  https://unpkg.com/react-dom@17/umd/react-dom.development.js

• 自定义脚本：

  https://graphicalstructure.codes/Geeks.js

注意：我们将使用这些文件。 （用户可以根据自己的要求使用任何来源）。

例子 ：

HTML

  

    
    

  

    
  
    Fetch and Load!
  
    
        document.getElementById("loadscript")
        .onclick = function getScript() {
  
            let newscript = 
                document.createElement("script");
  
            newscript.src = document
                .getElementById("source").value;
                  
            document.head.appendChild(newscript);
        };
    

  

输出：以下输出显示了 JavaScript 文件的动态加载。

• jQuery CDN：
  
• 动态加载 ReactJS ：
  
• 加载自定义 JS：
  

笔记：

• 用户可以使用元素上的任何事件来加载脚本。在本文中。
  “onclick”事件已被使用。
• 脚本不应包含错误，否则它们可能会引发错误并可能导致代码执行立即停止。
• 使用适当的错误处理，以便在获取时发生任何错误时不会中断代码的执行。
• 上述实现也适用于 ElectronJS。