可以用JavaScript加载jQuery上下文菜单吗？

我想用JavaScript加载jQuery插件

我尝试在Chrome developer工具控制台上执行JavaScript脚本，收到一个错误

VM4631:1 Uncaught TypeError:$。contextMenu不是一个函数

// setting up jQuery contextMenu Plugin 

function dynamicallyLoadScript(url) {
    var script = document.createElement("script");
    script.src = url;
    document.head.appendChild(script);
}

dynamicallyLoadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js')

var link = document.createElement( "link" );
link.href = "https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.0/jquery.contextMenu.min.css" ;
link.type = "text/css";
link.rel = "stylesheet";
link.media = "screen,print";
document.getElementsByTagName( "head" )[0].appendChild( link );

dynamicallyLoadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.0/jquery.contextMenu.min.js')
dynamicallyLoadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.0/jquery.ui.position.js')

// testing 

$.contextMenu({
    selector: '#post-868 > div > header > h2 > a',
    items: {
        copy: {
            name: "Copy",
            callback: function(key, opt){
                alert("Clicked on " + key);
            }
        }
    }
});

---

简短回答

问题在于

s加载是一个异步操作。
由于您正在动态插入这些脚本，因此在执行

$.contextMenu

指令时，还没有加载必要的脚本

解释

当您在

页面中使用

标记静态地定义多个脚本时，浏览器将以并行方式获取它们并尽快执行它们，维护它们的顺序（并阻止进一步解析页面）

但在您的情况下，您是动态地将

标签逐个插入页面

，这意味着：

• 这些脚本的执行顺序未知（一旦获取，就会执行）
• 在加载
  时继续执行，因此在加载
  之前执行

  $.contextMenu

为了说明这一点，我在

$.contextMenu

指令之前添加了

console.log

，并在

dynamicallyadscript

函数中添加了

console.time/timeEnd

：

函数dynamicallyLoadScript（url）{
var script=document.createElement（“脚本”）；
script.src=url；
//在加载的脚本上打印日志
script.onload=（）=>{console.timeEnd（url）；}；
控制台时间（url）；
document.head.appendChild（脚本）；
}
dynamicallyLoadScript（'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js')
var link=document.createElement（“链接”）；
link.href=”https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.0/jquery.contextMenu.min.css" ;
link.type=“text/css”；
link.rel=“样式表”；
link.media=“屏幕，打印”；
document.getElementsByTagName（“头”）[0].appendChild（链接）；
dynamicallyLoadScript（'https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.0/jquery.contextMenu.min.js')
dynamicallyLoadScript（'https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.0/jquery.ui.position.js')
log（'Calling$.contextMenu'）；
$.contextMenu({
选择器：'#后868>div>header>h2>a'，
项目：{
副本：{
名称：“副本”，
回调：函数（键，opt）{
警报（“点击”+键）；
}
}
}
});