1、能够日常平凡最常用到的就是get体式格局的jsonp跨域,能够用jquery供应的$.ajax 、$.getJSON。
$.ajax({
url:'接口地点',
type:'GET',
data:'想给接口授的数据',
dataType:'jsonp',
success:function(ret){
console.log(ret);
}
});
如许很简朴的就能够完成jsonp的跨域,猎取接口返回值。
想更多的相识$.ajax能够参考下面的链接,内里有很细致的引见:链接形貌
2、post体式格局的form表单跨域。
a.com html:
<script>
function postCallback(data){}
</script>
<form acrion='接口链接' method='post' target='ifr'></form>
<iframe name='ifr'></iframe>
a.com callback.php:
<?php
header('Content-type: text/javascript');
echo '<script>';
//回调原页面上函数处置惩罚返回结果
echo 'window.top.postcallback(' .$_GET['data']. ');';
echo '</script>';
b.com api.php:
<?php
//....
$data = '{"ret":0,"msg":"ok"}';
// ** 让结果跳转到a.com域 **
header("Location: http://a.com/callback.php?data=".urlencode($data));
3、CORS跨域
道理:CORS定义一种跨域接见的机制,能够让AJAX完成跨域接见。CORS 许可一个域上的收集运用向另一个域提交跨域 AJAX 要求。完成此功用异常简朴,只需由服务器发送一个相应标头即可。
注:挪动终端上,除了opera Mini都支撑。
应用 CORS,http://www.b.com 只需增加一个标头,就能够许可来自 http://www.a.com 的要求,下图是我在PHP中的 hander() 设置,“*”号示意许可任何域向我们的服务端提交要求:
header("Access-Control-Allow-Origin:*");
也能够设置指定域名:
header("Access-Control-Allow-Origin:http://www.b.com");
js部份:
$.ajax({
url: a_cross_domain_url,
crossDomain: true,
method: "POST"
});
CORS比较合适运用在传送信息量较大以及挪动端来运用。
4、script标签来跨域
<script src='接见的接口地点'></script>
js.onload = js.onreadystatechange = function() {
if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
// callback在此处实行
js.onload = js.onreadystatechange = null;
}
};
5、h5的postMessage
otherWindow.postMessage(message, targetOrigin);
otherWindow: 对接收信息页面的window的援用。能够是页面中iframe的contentWindow属性;window.open的返回值;经由过程name或下标从window.frames取到的值。
message: 所要发送的数据,string范例。
targetOrigin: 用于限定otherWindow,“*”示意不作限定
a.com/index.html中的代码:
<iframe id="ifr" src="b.com/index.html"></iframe>
<script type="text/javascript">
window.onload = function() {
var ifr = document.getElementById('ifr');
var targetOrigin = 'http://b.com'; // 若写成'http://b.com/c/proxy.html'结果一样
// 若写成'http://c.com'就不会实行postMessage了
ifr.contentWindow.postMessage('I was there!', targetOrigin);
};
</script>
b.com/index.html中的代码:
<script type="text/javascript">
window.addEventListener('message', function(event){
// 经由过程origin属性推断消息来源地点
if (event.origin == 'http://a.com') {
alert(event.data); // 弹出"I was there!"
alert(event.source); // 对a.com、index.html中window对象的援用
// 但由于同源战略,这里event.source不能够接见window对象
}
}, false);
</script>
6、子域跨域(document.domain+iframe)
www.a.com上的a.html
document.domain = 'a.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://script.a.com/b.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
var doc = ifr.contentDocument || ifr.contentWindow.document;
// 在这里支配b.html
alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};
script.a.com上的b.html
document.domain = 'a.com';
详细的做法是能够在http://www.a.com/a.html
和http://script.a.com/b.html
两个文件平分别加上document.domain = 'a.com'
;然后经由过程a.html
文件中建立一个iframe
,去掌握iframe
的contentDocument
,如许两个js
文件之间就能够“交互”了。固然这类方法只能处理主域雷同而二级域名差别的状况。