前端跨域为新人讲解

信任每一个前端er关于跨域这两个字都不会生疏，在实践项目中使用也是比较多的。但跨域办法的多种多样真实让人眼花缭乱。

跨域一词从字面意思看，就是跨域名嘛，但实际上跨域的规模肯定不止那么狭隘。具体概念如下：只需协议、域名、端口有任何一个不同，都被当作是不同的域。之所以会产生跨域这个问题呢，其实也很简单想理解，要是随意引证外部文件，不同标签下的页面引证类似的互相的文件，浏览器很简单懵逼的，安全也得不到保障了就。什么事，都是安全榜首嘛。但在安全约束的一起也给注入iframe或是ajax应用上带来了不少费事。所以我们要经过一些方法使本域的js可以操作其他域的页面目标或许使其他域的js能操作本域的页面目标（iframe之间）。

前面说过了，浏览器有一个同源策略，其约束之一是不能经过ajax的办法去恳求不同源中的文档。 第二个约束是浏览器中不同域的结构之间是不能进行js的交互操作的。不同的结构之间是能够获取window目标的，但却无法获取相应的特点和办法。

因为父窗口可以对iframe进行URL读写，iframe也可以读写父窗口的URL，URL有一部分被称为hash，就是#号及其后边的字符，它一般用于浏览器锚点定位，Server端并不关怀这部分，应该说HTTP恳求过程中不会带着hash，所以这部分的修正不会发生HTTP恳求，可是会发生浏览器历史记录。此办法的原理就是改动URL的hash部分来进行双向通讯。每个window经过改动其他 window的location来发送音讯（因为两个页面不在同一个域下IE、Chrome不允许修正parent.location.hash的值，所以要借助于父窗口域名下的一个署理iframe），并经过监听自己的URL的改动来接纳音讯。这个方法的通讯会形成一些不必要的浏览器历史记录，而且有些浏览器不支持onhashchange事情，需求轮询来获知URL的改动，最终，这样做也存在缺陷，比如数据直接暴露在了url中，数据容量和类型都有限等。

经过HTML5的postMessage办法跨域

高档浏览器Internet Explorer 8+, chrome，Firefox , Opera 和 Safari 都将支撑这个功用。这个功用首要包含承受信息的”message”事情和发送消息的”postMessage”办法。

想要更深入学习的小伙伴可以加下我的前端学习交流群386250991，最新的免费学习资料，视频。欢迎各位的到来，觉得写的还可以的点下关注，欢迎大家转载文章！