一、JSONP
原理:动态插入script标签,通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且把需要的json数据作为参数传入。
由于同源策略的限制,ajax请求值允许当前源(端口、协议、域名相同)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务器端输出json数据并执行回调函数,从而解决跨域的数据请求。
优点是兼容性好,简单易用,支持浏览器与服务器双向通信。缺点是只支持GET请求。
JSONP:json+padding(内填充),就是把padding填充到一个盒子里。
1 <script> 2 function createJs(sUrl){ 3 4 var oScript = document.createElement('script'); 5 oScript.type = 'text/javascript'; 6 oScript.src = sUrl; 7 document.getElementsByTagName('head')[0].appendChild(oScript); 8 } 9 10 createJs('jsonp.js'); 11 12 box({ 13 'name': 'test' 14 }); 15 16 function box(json){ 17 alert(json.name); 18 } 19 </script>
二、CORS
CORS(Cross-Origin Resource Sharing跨域资源共享),当一个请求url的协议、端口、域名三者之间任意一与当前页面地址不同即为跨域。
例如最常见的,在一个域名下的网页中,调用另一个域名中的资源。它允许浏览器向跨源服务器发出ajax请求,从而克服了ajax只能同源使用的限制。
三、document.domain
document.domain用来获取当前网页的域名
1 <script> 2 window.onload=function(){ 3 javascript:alert(document.domain); 4 } 5 </script>
浏览器显示
document.domain主要解决子域与父域之间的传值
问题描述:
现有父域:http://b.com/b.com.html
要向子域:http://a.b.com/a.b.com.html,获取数据怎么办?
将document.domain='b.com',都设置为父域即可
将子域和父域的domcument.domain设置为同一个父域的前提条件:这两个域名必须属于同一个基础域名,而且所用的协议、端口都要一致,否则无法利用document.domain进行跨域
四、window.name
window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有页面都是共享一个window,name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重。
window.name+iframe实现跨域。
iframe是html的一个标签,可以在网页中创建内联框架,有个src属性(指向文件地址、html、php等)可以选择内联框架的内容。
window.name(一般在js代码里出现)的值不是一个普通的全局变量。而是当前窗口的名字,这里要注意的是每个iframe都有包裹它的window,而这个window是top window的子窗口,而它自然也有window.name的属性,window.name的神奇之处在于name值在不同的页面(甚至不同域名)加载后依旧存在(如果没修改则值不会变化),并且可以支持非常长的name值(2MB)
五、window.postMessage
window.postMessage方法是html5新引进的特性,可以使用它来向其他的window对象发送消息,无论这个对象是属于同源或不同源,目前IE8+、Firefox、Chrome、Opera等浏览器都已经支持window.postMessage方法。
调用window.postMessage方法的window对象是指要接收消息的那一个window对象,该方法的第一个参数message为要发送的消息,类型只能为字符串。第二个参数targetOrigin用来限定接收消息的那个window对象所在的域,如果不想限定域,可以使用通配符*。
需要接收消息的window对象,可以是通过监听自身的message事件来获取传过来的消息,消息内容存储在该事件对象的data属性中。
上面所说的向其他window对象发送消息,其实就是指一个页面有几个框架的那种情况,因为每一个框架都有一个window对象。在讨论第二种方法的时候,我们说过,不同域的框架间是可以获取到对方的window对象的,而且也可以使用window.postMessage这个方法。下面看一个简单的示例,有两个页面