场景:js等静态资源存储在七牛云服务器;使用seajs加载静态资源。
存在问题:IE8对ajax跨域做了限制,在服务端不对跨域请求单独处理的情况下,在seajs中ajax无法获取到远程js文件的内容。
解决:修改seajs-wrapper-debug文件,首先去七牛请求静态资源,如果请求失败,再由应用服务器加载静态资源。采用这种方式同时能够解决,七牛服务器因为欠费等其它问题down机的问题,保证静态资源请求的稳定性。
// Helpers function xhr(url, callback) { //var r = global.ActiveXObject ? // new global.ActiveXObject("Microsoft.XMLHTTP") : // new global.XMLHttpRequest() ; //modified , 解决ie10跨域加载js问题。首先使用XMLHttpRequest,ActiveXObject是ie7之前版本 var r = global.XMLHttpRequest ? new global.XMLHttpRequest() : new global.ActiveXObject("Microsoft.XMLHTTP") ; try{ r.open("GET", url, true) ; }catch (e){ return failoverxhr(url, callback) ; } r.onreadystatechange = function() { if (r.readyState === 4) { // Support local file if (r.status > 399 && r.status < 600) { failoverxhr(url, callback) ; }else { callback(r.responseText) } } } //发送请求结果 var result = null ; try{ result = r.send(null) ; }catch (e){ return failoverxhr(url, callback) ; } return result ; } /** * 静态资源请求失败的处理 */ function failoverxhr(url, callback){ var r = global.XMLHttpRequest ? new global.XMLHttpRequest() : new global.ActiveXObject("Microsoft.XMLHTTP") ; url = getLocalAppUrl(url) ; console.log("use backup "+url); r.open("GET", url, true) ; r.onreadystatechange = function() { if (r.readyState === 4) { // Support local file if (r.status > 399 && r.status < 600) { seajs.emit("failover error", { uri: url , status: r.status }) ; }else { callback(r.responseText) } } } return r.send(null) ; } /** * 由本项目中获取请求的url */ function getLocalAppUrl(resourceURL) { //获取静态资源的uri var urlReg = /\/resources.*/ ; var uri = urlReg.exec(resourceURL) ; //如果配置了项目的url,则有url中请求静态资源 if(uri && window.resourceConfig && window.resourceConfig.path){ uri = window.resourceConfig.path + uri ; } return uri ; }