本文详细解析了 JavaScript 中常见的跨域问题及其四种主流解决方式。首先通过服务器返回 window.name 结合 iframe 实现数据传递，其次介绍利用 JSONP 动态脚本加载数据的原理，接着讲解 jQuery.getJSON 如何简化 JSONP 调用，最后提及通过配置 crossdomain.xml 解决 Flash 跨域限制的方法。
跨域产生的原因
假设访问的域名是：http://www.example.com.cn/
当请求的目标域名与当前域名不一致时，即构成跨域。由于浏览器的同源策略限制，正常的跨域请求通常会被拦截，导致无法直接获取数据。
解决方式：
一、window.name
window.name 跨域解决方案
1、服务器返回 window.name 数据
代码如下:
<script>window.name='{"id":"3", "name":"leisure"}';</script>
2、定义一个 iframe，并添加 onload 事件监听 <iframe id="iframe1" onload="iLoad"><iframe>
<script type="text/javascript">
var load = false;
function iLoad() {
if(load == false) {
// 同域处理，请求后会再次重新加载 iframe 以切换回同源地址
document.getElementById('iframe1').contentWindow.location = '/';
load = true;
} else {
// 获取 window.name 的内容，注意必须进行同域处理后方可访问！
var data = document.getElementById('iframe1').contentWindow.name;
alert(data); // {"id":"3", "name":"leisure"}
load = false;
}
}
</script>3、定义一个 form 表单，将 form 的 target 属性设置为 iframe 的 id，然后提交该 form
代码如下:
<form action="url" method="POST" target="iframe1">
<button type="submit" value="submit" />
</form>二、JSONP
JSONP 跨域解决方案
服务器返回格式为 callback({"id": "3", "name": "leisure"});
代码如下:
<script type="text/javascript">
function callback(data) {
alert(data);
}
</script>
<script type="text/javascript" src="http://www.example.com.cn/product.jsp?id=5&jsonp=callback"></script>三、jQuery.getJSON
jQuery.getJSON 实现 JSONP
服务器返回 json 格式数据 test({"id": "3", "name": "leisure"});其中 test 函数名为 callback 参数中定义
代码如下:
$.getJSON(url + "?callback=?", data, function(data) {
} 注意 callback=? 这个参数必须带上，jquery 会自动生成一个函数名替换这个问号！jQuery.getJSON 实际上是用了 JSONP 方式实现。
四、flash跨域
Flash 跨域策略文件配置
服务器添加 crossdomain.xml 配置文件
http://www.example.com.cn/crossdomain.xml
代码如下:
<?xml version="1.0"?>
<cross-domain-policy>
<allow-access-from domain="*.another.com.cn" />
</cross-domain-policy>