我正在加载 jquery.js
但它与联系表单的JS文件有冲突。所以我必须禁用 jquery.js
只适用于联系页面。
我有以下代码,但它不工作。我该怎么做呢?
<script>$("script[src='http://www.example.com/js/jquery.js']").remove()</script>
有条件地加载一个脚本比加载后再删除更好。
有条件的加载是这样的。
<body>
要测试是否存在冲突的脚本,你可以看看它的一个函数是否被加载。假设你的冲突脚本有一个函数是 naughtyFn()
. 这段代码只有在以下情况下才会加载jQuery naughtyFn()
并不存在。
// load jQuery, unless conflicting script exists
function loadJQ(conflictFName) {
if (typeof window[conflictFName] === 'function') {
return alert(`can't load jQuery, conflicts with ${conflictFName}`);
}
// create script tag and load into <head>
const jqScript = document.createElement('script');
jqScript.src = 'https://code.jquery.com/jquery-3.5.1.slim.min.js';
document.body.appendChild(jqScript);
setTimeout(() => {
console.log(`window.jQuery: ${window.jQuery}`);
}, 1000);
}
// load a conflicting script
function loadConflict() {
const conflictScript = document.createElement('script');
conflictScript.innerHTML = 'function naughtyFn() {}';
document.body.appendChild(conflictScript);
setTimeout(() => {
console.log(`window.naughtyFn: ${window.naughtyFn}`);
}, 1000);
}
<body>
<button onclick="loadConflict();">Load conflicting script</button>
<button onclick="loadJQ('naughtyFn');">Try to load jQuery</button>
</body>
当然,为了让冲突测试发挥作用,必须要有 naughtyFn
必须已经被加载。因此,最好的办法是等到 window.onload
来执行这个冲突测试。
window.onload = () => {
loadJQ('naughtyFn');
};