本篇文章给大家分享的内容是javascript之跨域问题，有着一定的参考价值，有需要的朋友可以参考一下
1jsonp
一般接口使用jsonp跨域，使用jquery的ajax指定datatype为jsonp即可
$.ajax({
async : true,
url : "https://api.douban.com/v2/book/search",
type : "get",
datatype : "jsonp", // 返回的数据类型，设置为jsonp方式
jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
jsonpcallback: 'handleresponse', //设置回调函数名
data : {
q : "javascript",
count : 1
},
success: function(response, status, xhr){
console.log('状态为：' + status + ',状态是：' + xhr.statustext);
console.log(response);
}
});
jsonp支持跨域的原理：jsonp实现跨域请求的原理简单的说，就是动态创建<script>标签，然后利用<script>的src 不受同源策略约束来跨域获取数据。
其实就是下面的代码的实现方式：js脚本返回callback(data),页面中定义一个callback函数
<script type="text/javascript">
function handleresponse(response){
console.log(response);
}
</script>
<script type="text/javascript">
window.onload = function() {
var obtn = document.getelementbyid('btn');
obtn.onclick = function() {
var script = document.createelement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleresponse";
document.body.insertbefore(script, document.body.firstchild);
};
};
</script>
2iframe + form 兼容ie浏览器，iframe的body内容是要用的数据
<iframe name='hidden_frame' id="hidden_frame" style='display:none'></iframe>
<form id="fileform" method="post" enctype="multipart/form-data" target="hidden_frame">
<input type="file" name="fileupload" />
</form>
<button id="submitbtn">开始上传</button>
<script type="text/javascript">
function callback(msg) {
//回调函数
alert(msg);
}
</script>
<script type="text/javascript">
$("#submitbtn").click(function() {
var callbackurl = window.location.href.substring(0, window.location.href.lastindexof('/')) + "proxy.html"; //获取代理文件路径
$("#fileform").attr("action", "filehandler.ashx?callbackurl=" + callbackurl);
$("#fileform").submit();
})
</script>
3h5的postmessage()方法，兼容性没那么好
详细见https://www.cnblogs.com/dolphinx/p/3464056.html
上传图片代码，接口返回的数据就是postmessage的写法
<form action='http://bird.sns.iqiyi.com/group_photo/upload' method="post" target="imgfile"
id="fileinfo" enctype="multipart/form-data">
<input type="file" id="imgfile" accept="image/gif, image/png" class="hide" onchange="getphotosize(this)"
/>
<input type="hidden" name="name" value="" />
<input type="hidden" name="hobby" value="" />
</form>
<iframe
<script type="text/javascript">
$(document).ready(function() {
$('#upload').click(function() {
$("#imgfile")[0].click();
});
});
var querytojson = function(url) {
url = url.replace(/#.*/, "");
var query = url.substr(url.lastindexof('?') + 1);
var params = query.split('&');
var result = {};
for (var i = 0; i < params.length; i++) {
var t = params[i].split("=");
if (!t[0]) continue;
result[decodeuricomponent(t[0])] = decodeuricomponent(t[1] || "");
}
return result;
};
$('[name=name]').val(querytojson(window.location.href).name);
$('[name=hobby]').val(querytojson(window.location.href).hobby);
//判断照片大小
function getphotosize(obj) {
photoext = obj.value.substr(obj.value.lastindexof(".")).tolowercase();
//只支持jpg,png
if (photoext != '.jpg' && photoext != '.png') {
showmsg("请上传正确的图片格式，如jpeg、png");
return false;
}
var filesize = 0;
filesize = obj.files[0].size;
filesize = math.round(filesize / 1024); //单位为kb
if (filesize >= 10000) {
showmsg("建议上传图片不超过10m");
return false;
}
//跳转到过渡页，请求上传接口,将接口返回插入结果页src
$('#page2').addclass('hide');
$('#imgfile').addclass('hide');
$('#fileinfo').submit();
$('#loading').removeclass('hide');
getmsg();
}
//获取返回数据
function getmsg() {
window.addeventlistener('message',
function(e) {
$('#loading').addclass('hide');
if (e.source != window.parent) return;
if (e.data.code == 'a00000') {
$('#imgsrc')[0].src = e.data.data.url;
$('#msg').html(e.data.data.message);
$('#page5').removeclass('hide');
} else {
location.href = '/anothertry.html';
}
},
false);
}
//显示提示信息
function showmsg(msg) {
var _this = this;
$('#msgtip').html(msg);
$('#msgtip').removeclass('hide');
window.settimeout(function() {
$('#msgtip').addclass('hide');
},
3000);
}
//再试一次
function tryagain() {
$('#fileinfo').submit();
$('#page5').addclass('hide');
//看不到加载页面，页面闪
$('#loading').removeclass('hide');
getmsg();
}
</script>
以上就是javascript之跨域问题的详细内容。