addEventListener 加载在 Firefox 上触发两次答案

【问题标题】：addEventListener load fires twice on FirefoxaddEventListener 加载在 Firefox 上触发两次
【发布时间】：2020-02-26 08:52:14
【问题描述】：

我使用这个简单的脚本加载器在加载主 CSS 后动态加载 Javascript。像 Safari/Chrome 这样的浏览器可以完美运行并加载脚本一次。

但是 Firefox 两次触发该事件导致页面无法正常工作。

我怎样才能防止这种情况发生？

var Loader = function () {};

Loader.prototype = {
    require: function (scripts, delay, id, callback) {
        this.loadCount = 0;
        this.totalRequired = scripts.length;
        this.callback = callback;

        var self = this;

        this.timerID = window.setTimeout(function () {
            for (var i = 0; i < scripts.length; i++) {
                self.writeScript(scripts[i], id[i]);
            }
            window.clearTimeout(self.timerID);
        }, delay);
    },
    loaded: function (evt) {
        this.loadCount++;

        if (this.loadCount === this.totalRequired && typeof this.callback == 'function') {
            this.callback.call();
        }
    },
    writeScript: function (src, id) {
        var self = this;
        var s = document.createElement('script');
        s.defer = true;
        s.id = id;
        s.src = src;

        s.addEventListener('load', function (e) {
            self.loaded(e);
        }, false);

        document.body.appendChild(s);
    }
};

function initJS(vendor, js) {
    var vendor_loader = new Loader();
    vendor_loader.require(vendor,
        0,
        ['js1'],
        function () {
            var js_loader = new Loader();
            js_loader.require(js, 500, ['js2', 'js3', 'js4']);
        });
}

<head>
  <link rel="stylesheet" href="/dist/styles/screen.css" media="print" onload="this.media='all';initJS(['/dist/scripts/vendor.js'],['/dist/scripts/main.js', '/dist/scripts/addons.js', '/dist/scripts/recaptcha.js']);">
</head>

【问题讨论】：

我认为是link 中的onload 触发了两次

标签： javascript firefox

【解决方案1】：

设置this.media 会导致link 标记重新加载，因此您会收到两次对onload 的调用。

<head>
  <link rel="stylesheet" href="https://cdn.sstatic.net/Shared/stacks.css?v=f6dc2e55f461" onload="this.media='all';console.log('hello')">
</head>

比较一下：

<head>
  <link rel="stylesheet" href="https://cdn.sstatic.net/Shared/stacks.css?v=f6dc2e55f461" onload="console.log('hello')">
</head>

所以，我猜，将media 属性从print 更改为all，并且不要在加载时设置媒体值。

【讨论】：