控制使用jquery load()方法载入新页面中的元素

Posted 2020-10-10 前端潘潘

最近在项目中用到jquery的load()方法来加载页面，首先简单说一下load()方法。

load(url,data,callback);该方法接收三个参数，第一个是载入的页面地址，第二个是要传到服务器的参数，第三个是页面加载成功后执行的回调函数。这三个参数中，data和callback是根据具体的项目需求可选的。下面就来说说遇到的问题：页面中放一个空的div容器用来载入新的页面，载入后需要控制新页面中的元素显示隐藏状态，这就需要获取载入页面的元素，再进行下一步的操作。载入页面后审查元素，载入的页面内容直接显示在div容器里面了，我当时在load(url)方法后面，直接获取元素进行隐藏，但是载入页面的元素并没有隐藏，当时很费解，心想我又不是通过iframe引入的页面，为什么无法隐藏呢？后来在网上搜索，和同事商量，最后找到了解决办法，在load(url,callback)方法里面加上回调函数，在回调函数里面获取元素进而隐藏。这是为什么呢，个人觉得可能跟js执行顺序有关，执行完load(url)后，下面的代码跟着继续执行，不会等到load()执行完毕。后来在网上搜索，load()方法加载页面是异步执行的，所以只有在load()的callback里面才能获取到页面元素。原来如此，这个小问题费了两个小时的时间，还是基础不扎实啊。由此扩展，load()方法载入页面在部分情况下可以取代之前使用的iframe载入页面，以后有机会会去尝试。