关于控制台使用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号
浙公网安备 33010602011771号