JavaScriptJS跨域

Posted 2020-08-04 长安

单独说一下js跨域问题，因为之前也遇到过：

javascript出于安全方面的考虑，不允许跨域调用其他页面的对象。

跨域简单的理解就是因为javascript同源策略的限制，a.com域名下的js无法操作b.com 或者是c.a.com域名下的对象。

解决方案：

1.用过jsonp，原理是通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。

2.通过修改document.domain来跨子域，只适用于不同子域的框架间的交互，两个页面的document.domain都设成相同的域名就可以。但要注意的是，document.domain的设置是有限制的，只能把document.domain设置成自身或更高一级的父域，且主域必须相同。

domain+iframe

3.通过window.name来进行跨域

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

4.通过html5中的window.postMessage方法来跨域传送数据

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

调用postMessage方法的window对象是指要接收消息的那一个window对象，该方法的第一个参数message为要发送的消息，类型只能为字符串；第二个参数targetOrigin用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符 *  。

需要接收消息的window对象，可是通过监听自身的message事件来获取传过来的消息，消息内容储存在该事件对象的data属性中。