# 跨域问题

浏览器同源策略引起

# .Jsonp（JSON With Padding)

解决原理：src属性没有受到限制

Ajax 是利用 XMLHTTPRequest 来请求数据的，而它是不能请求不同域上的数据的。但是，在页面上引用不同域的 js 文件

a.html
...
<script>
 function callback(data) {
   console.log(data.url)
 }
</script>

<script src='b.js'></script>
...
b.js
callback({url: 'http://www.rccoder.net'})

1
2
3
4
5
6
7
8
9
10
11
12

JSONP 的原理就要从 script 说起。script 可以执行其他域的js 函数.上面的代码是可以执行的，并且可以在console里面输出http://www.rccoder.net

jQuery 让 JSONP 的使用API和Ajax的一模一样：

$.ajax({
  method: 'jsonp',
  url: 'http://server2.example.com/RetrieveUser?UserId=1823',
  success: function(data) {
    console.log(data)
  } 
})

1
2
3
4
5
6
7

jQuery 在背后倾注了心血，它会在执行的时候生成函数替换callback=dosomthing ，然后获取到数据之后销毁掉这个函数，起到一个临时的代理器作用，这样就拿到了数据。

原理：使用自定义HTTP头部，通过设置响应头的Access-Control-Allow-Origin来达到目的

正常情况下XMLHttpRequest是只发送一次请求的，但是跨域问题下很可能是会发送两次请求（预发送） https://zhidao.baidu.com/question/716436762614258125.html

# window.name

原理：window.name在一个窗口（标签）的生命周期之内是共享的，利用这点就可以传输一些数据

# document.domain

原理：在不同的子域 + iframe交互的时候，获取到另外一个 iframe 的 window对象是没有问题的

# location.hash

这种方法可以把数据的变化显示在 url 的 hash 里面。但是由于 chrome 和 IE 不允许修改parent.location.hash 的值，所以需要再加一层。

# window.postMessage()

HTML5 的一个新特性，可以用来向其他所有的window对象发送消息。需要注意的是我们必须要保证所有的脚本执行完才发送MessageEvent，如果在函数执行的过程中调用了他，就会让后面的函数超时无法执行。

全量分析 阅读量：