你能用JavaScript加载jQuery contextMenu吗？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了你能用JavaScript加载jQuery contextMenu吗？相关的知识，希望对你有一定的参考价值。
我想用javascript加载一个jQuery插件jQuery contextMenu。
我尝试在Chrome开发人员工具控制台上关注JavaScript脚本并收到错误VM4631:1 Uncaught TypeError: $.contextMenu is not a function。
// 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);
}
}
}
});
答案
简短的回答
问题是<script>s加载是一个异步操作。
并且因为您正在动态插入这些脚本，所以当执行$.contextMenu指令时，尚未加载必要的脚本。
说明
当您使用页面<script>中的<head>标记静态定义多个脚本时，浏览器将以并行方式获取它们并尽快执行它们，维护它们的顺序（并阻止进一步解析页面）。
但在您的情况下，您将<script>标签逐个动态插入页面<head>，这意味着：
- 这些脚本执行的顺序是未知的（一旦获取它，它就被执行）
- 你的
<script>s正在加载时继续执行，所以在你的$.contextMenus确实加载之前执行<script>。
为了说明这一点，我在console.log指令之前添加了一个$.contextMenu，并在console.time/timeEnd函数中添加了dynamicallyLoadScript：
function dynamicallyLoadScript(url) {
var script = document.createElement("script");
script.src = url;
// Print log on script loaded
script.onload = () => { console.timeEnd(url); };
console.time(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')
console.log('Calling $.contextMenu');
$.contextMenu({
selector: '#post-868 > div > header > h2 > a',
items: {
copy: {
name: "Copy",
callback: function(key, opt){
alert("Clicked on " + key);
}
}
}
});以上是关于你能用JavaScript加载jQuery contextMenu吗？的主要内容，如果未能解决你的问题，请参考以下文章
你能用 JavaScript 判断一个元素是不是正在接触另一个元素吗？
你能用 c++ 加载一个网页，包括 JS 和动态 html 并获取渲染的 DOM 字符串吗？