关于控制台使用script标签动态插入jQuery脚本无法立即正常使用的问题。
问题背景:
目的:通过在他人的网页也增添jQuery库来使用自己的jQuery脚本,
遇到的问题:直接使用$会提示.text is not a function的
var jqueryDOM=document.createElement("script")
jqueryDOM.src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"
jqueryDOM.onload=function(){
$(".a").text("789")
}
document.body.append(jqueryDOM);
排查:通过setTimeout和sleep函数延时进行调用line4的代码都无济于事,后来经过查阅,commendAPI中带有$和$$这两个函数,也就是说和控制台line4的jQuery代码和控制台自带的api发生了冲突
//以下为$和$$函数的介绍
$(selector)
//相当于document.getElemenrtById()或是document.getElementByClassName()[0]
$$(selector) //相当于querySelectorAll(),返回一个数组,包含所有选择到的元素。
解决方法①:
<script>
var jqueryDOM = document.createElement("script")
jqueryDOM.src = "https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"
jqueryDOM.onload = function () {
$(".a").text("789")
}
window.addEventListener("load", () => { document.body.append(jqueryDOM); });
</script>
//原理:通过在网页主体增加onload事件,使其完全加载之后再覆盖了原有commandAPI函数再调用jQuery的$函数
解决方法②
<script>
var jqueryDOM = document.createElement("script")
jqueryDOM.src = "https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"
jqueryDOM.onload = function () {
jQuery(".a").text("456");
}
document.body.append(jqueryDOM);
</script>
//方法:改用$(jQuery)的别名jQuery代替$(commandAPI),这样就不需要在网页刚加载的时候就动态增添我们自己的onload事件了

浙公网安备 33010602011771号