跨域指的就是js在不同域名之间进行的数据通信。
所谓同源指的就是协议，域名，端口号这三者必须都相同，如果有一个不同，那么也不能叫做同源。在使用ajax通信，或者是iframe多窗口之间进行通信的时候，需要注意同源策略带来的影响。
常见的跨域的几种方式：
1，jsonp跨域的方式
jsonp是一种非正式的协议，这个协议允许用户传递一个callback参数到服务器端，然后服务器端把这个参数名当做js的函数名来包裹住JSON数据。使用jsonp的跨域方式是需要服务器端进行配合的。
底层原理就是动态生成一个<script>标签，通过src的属性来进行跨域请求文件，当文件下载成功之后，会执行callback后面的参数，这个时候就能获取到了。
2，使用window.name
假如你的应用不是单页面的，这个时候有一个a.html和b.html，他们都在同一个地址下http://www.test.com/crossdomain 这个时候如果想要把a.html中的值传入到b.html中，可以使用window.name的方式。
//a.html
<script>
window.name = " 我是a页面的值 "
setTimeout( function(){
window.location.href = ' b.html '；
} , 1000)
</script>
//b.html
<script>
console.log(window.name) //"我是a页面的值"
//这个时候就会发现,b页面已经获取到a页面中的值了。
//注意,window.name 只能接收字符串的形式，如果你想传递一个对象的话，可以先使用JSON.stringify()的方式把对象转换为json格式，然后在b页面通过JSON.parse()进行解析。
</script>
上面的这种方式只是简单的两个页面处于同源下的页面间数据传递的一种方式。
如果想要跨域的情况下是不能直接使用的，这个时候就需要一个代理了(proxy) , 可以使用隐藏的iframe的方式来实现。
/*
假如现在有两个页面，a页面和一个提供数据源的页面dataSource.html。我想让a页面获取到dataSource中的数据。
a页面，http://www.abc.com/test/a.html
dataSource，http://www.ad.com/data/dataSource.htm
这个时候a页面是不能直接获取到dataSource提供的数据的。 需要有一个隐藏的代理，iframe
*/
<body>
<iframe
src='http://www.ad.com/data/dataSource.htm'
id='myiframe'>
</iframe>
<script>
function $(id){ return document.getElementById(id)}
//必须要等iframe onload才能执行下一步动作
$('myiframe').onload = function(){
var data = $('myiframe').contentWindow.name;
}
$('myiframe').src = "abount:blank"； //把iframe的src修改为和a页面同源。这样a页面可以获取iframe中的数据。
/*
*dataSource中的代码
*/
<body>
<script>
window.name = "{ name : 'smith' , age : 20 }"
</script>
</body>
</script>
</body>
这样就能够实现跨域请求的方式了。
3 , 通过h5的postMessage的方式来实现。
postMessage的应用场景
1,多页面之间的数据传递
2,页面和嵌套的iframe之间的传递
postMessage接收两个参数data : 要传递的数据，字符串形式 ， origin ： 源，指的是数据要发送的页面。
<body>
<iframe src = ' b.html ' id=' iframeNode '></iframe>
<script>
window.postMessage( '发送数据到iframe' ， “*”);
var iframeNode = document.getElementById('iframeNode');
</script>
</body>
//iframe中
<body>
<script>
window.onmessage = function(e){
log(e.data)
}
</script>
</body>
网友评论