js 获取 script

JavaScript 中获取 <script> 标签的方法有多种，以下是一些常见的方法：

基础概念

在 HTML 文档中，<script> 标签用于嵌入或引用 JavaScript 代码。通过 JavaScript 获取这些标签可以用于动态操作脚本，例如修改脚本内容、添加新的脚本等。

类型

内联脚本：直接写在 <script> 标签内的 JavaScript 代码。
外部脚本：通过 src 属性引用的外部 JavaScript 文件。

应用场景

按需加载：例如，只在用户执行特定操作时加载某个功能相关的脚本。
插件系统：允许第三方开发者通过添加 <script> 标签来扩展网站功能。
性能优化：通过异步加载脚本减少对页面渲染的影响。

获取 `<script>` 标签的方法

方法一：通过 `document.getElementsByTagName`

var scripts = document.getElementsByTagName('script');
for (var i = 0; i < scripts.length; i++) {
    console.log(scripts[i].src); // 输出每个脚本的 src 属性
}

方法二：使用 `document.querySelectorAll`

var scripts = document.querySelectorAll('script');
scripts.forEach(function(script) {
    console.log(script.src); // 输出每个脚本的 src 属性
});

方法三：获取特定的 `<script>` 标签

如果你知道某个脚本的特定属性（如 id 或 src），可以直接获取它：

// 通过 id 获取
var specificScript = document.getElementById('myScriptId');

// 通过 src 属性获取
var scriptByUrl = Array.from(document.getElementsByTagName('script')).find(script => script.src.includes('specific-url.js'));

可能遇到的问题及解决方法

问题1：无法获取到动态添加的 `<script>` 标签

如果你在脚本加载后动态添加了新的 <script> 标签，可能需要使用 MutationObserver 来监听 DOM 的变化：

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        mutation.addedNodes.forEach(function(node) {
            if (node.tagName === 'SCRIPT') {
                console.log('New script added:', node.src);
            }
        });
    });
});

observer.observe(document.head, { childList: true });

问题2：跨域脚本的安全限制

如果你尝试访问跨域脚本的内容，可能会遇到同源策略的限制。解决方法包括：

CORS：确保外部脚本服务器设置了正确的 CORS 头。
代理：通过同源服务器代理请求外部脚本。

示例代码

以下是一个完整的示例，展示了如何获取所有 <script> 标签并处理动态添加的情况：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Script Example</title>
</head>
<body>
    <script id="existingScript" src="existing-script.js"></script>
    <button onclick="addNewScript()">Add New Script</button>

    <script>
        function addNewScript() {
            var newScript = document.createElement('script');
            newScript.src = 'new-script.js';
            document.head.appendChild(newScript);
        }

        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                mutation.addedNodes.forEach(function(node) {
                    if (node.tagName === 'SCRIPT') {
                        console.log('New script added:', node.src);
                    }
                });
            });
        });

        observer.observe(document.head, { childList: true });

        var scripts = document.getElementsByTagName('script');
        for (var i = 0; i < scripts.length; i++) {
            console.log('Existing script:', scripts[i].src);
        }
    </script>
</body>
</html>

通过以上方法，你可以有效地获取和管理页面中的 <script> 标签，提升应用的灵活性和性能。