iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理

JS是Web前端开发三要素之一，是郑州Web前端基础学习中非常重要的知识点。JS涉及的知识点多且杂，很多同学反映不知如何下手，事实上，只要你认真记、多练习，就可以慢慢掌握它。今天千锋郑州Web前端培训小编就给大家简单分享一下JS跨域知识点。

JS跨域是指通过JS在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过JS获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。对于端口和协议的不同，只能通过后台来解决。

要解决跨域问题，你可以采用以下几种方法：

1、通过jsonp跨域

jsonp由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的json数据。

在JS中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的JS脚本文件却是可以的，jsonp正是利用这个特性来实现的。JS文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入，所以jsonp是需要服务器端的页面进行相应的配合。

2、通过修改document.domain来跨子域

浏览器都有一个同源策略，其限制之一是不能通过ajax的方法去请求不同源中的文档,第二个限制是浏览器中不同域的框架之间不能进行js的交互操作。

document.domain的作用就是将不同的url设置成相同的域名来实现跨域。需要注意的是document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。修改document.domain的方法只适用于不同子域的框架间的交互。

3、使用HTML5的window.postMessage方法跨域

window.postMessage(message,targetOrigin) 方法是HTML5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

4、使用window.name来进行跨域

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中。

想获得更多郑州Web前端基础学习教程资料，你可以关注“千锋郑州校区”微信公众号，定期发布技术热点和行业动态。如果你想免费领取Web前端入门进阶全套教程资料，可以在公众号回复【我要教程】，参与“三人组团免费领教程”活动，名额有限，赶快行动吧！