关于控制台使用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事件了
posted @ 2020-07-20 10:27  纪春生  阅读(496)  评论(0)    收藏  举报