Question

我正在构建一个自动组合和缩小网站javascript的网络服务。网站所有者只需在网站主题中包含以下js代码段，它就会创建缩小的文件并将其附加到head元素。

我所看到的问题是，当动态附加脚本时，它不一定在身体的其余部分之前执行。由于许多站点可能希望在生成正文之前执行头脚本，因此这是一个问题。

有什么方法可以强制动态添加的脚本先执行其他操作？也许有一个解决方法，比如删除整个主体并在附加脚本加载后重新插入它......虽然这看起来很糟糕。

<script type="text/javascript">
    var minify_files = new Array(
        'domain.com/js/one.js',
        'domain.com/js/two.js',
        'domain.com/js/three.js'
    );
</script>
<script type="text/javascript" src="minifyservice.com/minify.js"></script>

Answer 1

我想你需要问/要求用户放置脚本标记在任何其他资产之前。
将脚本数组放入查询字符串。
后端服务合并并返回脚本

<script type="text/javascript" src="site.com/mini.js?script1&script2"></script>

Answer 2

<script type="text/javascript" src="minifyservice.com/minify.js"></script>

将在用户代码之前

<script type="text/javascript">
    minify_files([
        'domain.com/js/one.js',
        'domain.com/js/two.js',
        'domain.com/js/three.js'
    ]);
</script>

或类似的东西可能会更好。 minify.js将定义函数minify_files，它将是这样的：

function minify_files(paths) {
    var query="";
    for (var i = 0; i < paths.length; i++) {
        query += encodeURIComponent(paths[i]);
        query += i < paths.length - 1 ? "&" : "";
    }
    document.write(
        "<scri" + "pt src=\"minifyservice?" + 
        query + "\"><scri" + "pt>"
    );
}

未经测试。但应该是一个很好的起点。由于document.write，它将阻止并确保脚本在页面加载之前加载，但仅在页面完成呈现之前有效。（保持在头部或至少在关闭身体标签之前。）

动态插入脚本并立即执行

2 个答案: