[Jquery]关于$.load()使用的一些问题

Posted 2020-08-17 真中合欢

对应问题：

　　1、js和jquery无效

　　2、点击事件无效

　　3、使用$.load()时onload无效

　　4、使用$.load()时，公共cdn库无效

 

讨论：

　　当A页面中的元素使用jquery的$.load()方法动态加载B页面时，B页面的ready方法会被触发，但是B页面的window.onload方法不会触发。

　　也就是说下面ready()方法中的的代码可以执行，写在其中的点击点击事件有效。

$(function () {
　　// 此处代码有效
});

　　而写在onload中的代码不会被执行，写在其中的点击事件也无效

window.onload = function (ev) {
　　// 此处的代码无效
}

 

 

引申：　　

　　通常情况下，如果从外部引入js代码  <script src=‘地址‘></script> ,只要写在ready()的前面，都可以在ready()方法执行之前引入,比如：

<script src="js/jquery.min.js"></script>
<script src="js/你的js.js"></script>
<script>
        $(function () {
            //你的js.js里定义了一个叫fun1()的方法
　　　　　　　fun1()

        });
</script>

　　上面这段函数，在ready方法之前，引入了“你的js.js”这个外部js，而这个外部js的函数fun1()在ready()中可以正常执行。

 

　　如果此时引入的不是本地的"你的js.js"，而是一个公共CDN库的js文件，像下面这样：

<script src="js/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/cdn库的js.js"></script>
<script>
    $(function () {
        fun1() //fun1是"cdn库的js.js"中的一个函数
    });
</script> 

　　此时fun1()还是可以成功执行，因为ready()会等待来自其他地址的js文件加载完成后再执行。

　　但是如果上面这段代码写在B页面，而B页面是通过A页面的$.load()方法动态加载的，B页面的ready()方法就不会等待一个"非本域名"的js文件加载完成。也就是在执行B页面的ready()方法时，fun1()所在的js还没有加载，会报fun1 is not define这个错误。

　　如果不使用公共cdn或者类似oss这种加速访问方式，保持所用到的js和网站在同一域名下，则不会出现这个问题。

　　也就是说，如果想使用cdn或者oss来加快访问速度，又需要通过$.load()方法引入一个B页面，那么B页面需要用到的js必须在A页面引入，或者不在B页面的ready方法中调用外部js。