通过ajax用jsonp跨域取服务器一个文件夹下的图片,结果谷歌浏览器和ie报不安全脚本,被阻止了。
网站做了SSL.通过下面的ajax跨域从另外一个服务器上把文件夹下所有图片名取出放到jsonp中,返回后,用文件名再去去图片,追加到div中。取图片名时要进行用户验证。所以传过去的用户名和密码都用MD5加密了。
为了解决文件名的乱码问题,图片名用encodeURI(data[i])进行加密了。结果谷歌浏览器和ie浏览器都阻止了。允许运行安全威胁的脚本才会显示图片。本人是菜鸟,求救大神。
大概代码如下:
$.ajax({
type:"get",
url:imageLoadURL,
dataType : "jsonp",
data:{'userId':userId,'user':userName+','+userPassword},
jsonp:'callbackParam',
jsonpCallback:'success_jsonpCallback',
success:function(data){
var data=data.data;
if(data.length != 0){
var buffstr="<ul>";
for(var i=0;i<data.length;i++){
buffstr+="<li><div class='imgDiv'><img alt='"+data[i]+"' title='"+data[i]+"' src='"+imgpath+encodeURI(data[i])+"' class='img' /></div></li>";
}
buffstr+="</ul>";
$("#imgdiv").html(buffstr);
}
}
});
[解决办法]
总结一下LZ遇到的问题:
https使用jsonp跨域请求http站点的资源,浏览器出现警告,如何消除警告而又能正确跨域取到资源?
[解决办法]
方案一:用后端语言做代理。
方案二:使用window.name跨域。
$.ifrGet = function(url,data,cb){
var state = 0,
iframe = $(document.createElement('iframe'));
iframe.attr(src,url+'?'+$.param(data)+'&_='+(new Date()).valueOf());
iframe.on("load",function(){
if (state === 1) {
var data = iframe.contentWindow.name; // 读取数据
if(typeof cb === 'function') {
cb(data);
}
iframe.remove();
iframe = null;
} else if (state === 0) {
state = 1;
iframe.contentWindow.location = "/"; // 设置的代理文件
}
});
iframe.css({width:0,height:0,border:0});
iframe.appendTo(document.body);
};
window.name=<%=JSONDATA%>