前阵子做了一个前端动态加载json数据的应用,其中使用xmlhttprequest动态加载js,但是前提是我的前端必须和js数据之间不能跨域,这个局限就很大了,果然过不多久,就接到要求,这个前端需要整合到另一个服务器上面去,我顿时就傻眼了,因为我最不愿意看到的情况出现了,跨域问题,唉,新手总是怕遇见问题,遇见多了估计就成了高手了。
没办法就只能重写前端获取数据的js逻辑,这次不能使用xmlhttprequest,而是使用动态加载script的方式加载js脚本,之前也曾经试过这种方法,但是碰到了异步加载的问题就搁置了,这次我也想了一些办法解决了这些问题,现在说一说我的思路。
1、如何加载script?
我使用的还是原始的js创建元素的方法加载的:document.createElement("script");然后设置路径等属性;
2、什么时候才能使用动态加载的js文件中的变量?
由于script是异步加载的,所以在执行append方法后,并不能马上使用里面的脚本,必须要等到脚本完全加载完毕之后才能使用,script元素有onload(ff、chrom)、onreadystatechange(ie)、onerror(ie、chrome、ff)属性可以设置回调函数,在ff和chrom中,script加载成功后会执行onload设置的回调函数,而在ie中如果script的加载状态发生变化后就会执行onreadystatechange回调函数,在函数中根据状态码判断加载状态,如果脚本加载失败的时候就会执行onerror的回调函数。
特别的,在ie中,如果你的脚本是已经加载过的,那么ie不会重新再次加载,这个特性在开始的时候可是让我大吃苦头,如果你的脚本是在之前加载过的话,那么在onreadystatechange回调函数中会有相应的状态码加以判断就是readystate=='complete',如果你要加载的脚本中的内容是动态变化的,同一个脚本文件每个一段时间其中的内容就会不一样,这个特性就会带来麻烦了,不过可以在你的脚本地址后面加上"?354354546",就是加上一个问号和一个随机数,这样就能保证在ie中不会应为你的脚本地址加载过就不会再次加载了。