如何解决‘Mousetrap is not defined’报错问题

错误原因很明确：你执行绑定Mousetrap的代码时，外部的mousetrap.js脚本还没加载完成，浏览器找不到Mousetrap全局对象。

核心解决思路 #

确保只有在mousetrap.js完全加载并可用后，再执行绑定键盘事件的代码。最可靠的方式是监听脚本的load事件：

var script100 = document.createElement('script');
script100.setAttribute('src', 'https://craig.global.ssl.fastly.net/js/mousetrap/mousetrap.js?a4098');
script100.setAttribute('type', 'text/javascript');

// 脚本加载完成后再执行绑定逻辑
script100.onload = function() {
    // 定义复制函数
    function copyDivToClipboard1() {
        var range1 = document.createRange();
        range1.selectNode(document.getElementById("box"));
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range1);
        document.execCommand("copy");
        window.getSelection().removeAllRanges();
    }
    // 绑定按键4
    Mousetrap.bind('4', copyDivToClipboard1);
};

document.getElementsByTagName('body')[0].appendChild(script100);

为什么原来的代码会出错 #

通过createElement添加的外部脚本是异步加载的，浏览器会在后台下载脚本，同时继续执行后续代码。你原来的绑定代码在脚本还没下载完成时就运行了，自然找不到Mousetrap对象。

额外优化建议 #

• 不需要单独创建第三个脚本标签插入复制函数，直接把函数定义放到onload回调里即可，减少冗余代码。
• 如果你的JS注入工具支持按顺序执行脚本，也可以把引入mousetrap的脚本设为第一个，绑定代码设为第二个，但onload的方式兼容性更好，不受注入工具的顺序限制。

内容的提问来源于stack exchange，提问作者viaAhmed