如何在浏览器中实现一个“getScript”函数，用来获取/执行JavaScript文件

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

本文主要介绍了如何从任何jQuery（CDN）链接或React文件中使用文档对象模型（DOM）来获取JS文件。

方法：

创建一个新的脚本元素。

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

提供新创建的脚本元素的来源。

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

将元素附加到DOM头部，以便执行脚本。

document.head.appendChild(newscript)

上面的方法在下面的示例中实现，考虑了以下文件资源，例如动态加载的脚本。

资源： 您可以在输入框中使用此CDN链接来获取。

JQuery CDN：

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

React 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

注意: 我们将使用这些文件。(用户可根据自己的需求使用任何资源)。

示例: 在这个示例中，我们将使用上述方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
</head>
<body>
    <input type="text"
           id="source"
           style="width: 60%"
           placeholder="Enter the link of source." />
    <button id="loadscript">Fetch and Load!</button>
    <script>
        document.getElementById("loadscript")
            .onclick = function getScript() {
                let newscript =
                    document.createElement("script");
                newscript.src = document
                    .getElementById("source").value;
                document.head.appendChild(newscript);
            };
    </script>
</body>
</html>

输出: 以下的输出展示了JavaScript文件的动态加载。