JavaScript跨域技术详解：从子域到完全跨域

"这篇文档详细介绍了JavaScript中的跨域技术，主要关注如何在不同子域以及完全不同的域之间实现跨域操作。同源策略是JavaScript的一个关键安全机制，它限制了JavaScript只能访问与其所在页面同一域下的内容。然而，为了实现跨域通信，开发者需要采用特定的技术来规避这一限制。文档将分为两部分，分别讨论不同子域间的跨域技术和完全跨域的情况。 （一）不同子域的跨域技术 1. JavaScript调用跨域 当需要在不同子域的页面之间进行JavaScript函数调用时，可以通过设置`document.domain`属性来实现。假设abc.example.com和def.example.com是example.com的两个子域，可以在各自页面中设置`document.domain = 'example.com'`。这样，两个页面的JavaScript就能互相调用了。例如，abc.example.com页面可以调用def.example.com页面中定义的`funcInDef()`函数。 2. Ajax请求跨域 对于向不同子域提交Ajax请求，可以利用JSONP（JSON with Padding）技术。JSONP是一种通过动态插入`<script>`标签来实现跨域请求的方法。服务端提供一个能接受回调函数名的API，客户端创建一个函数并将其名称作为参数发送到服务端。服务端返回的响应是一个JavaScript函数调用，带有数据作为参数，客户端预先定义的函数会被执行，从而获取到数据。 （二）完全不同的域之间的跨域技术 1. CORS（Cross-Origin Resource Sharing）是现代浏览器支持的一种跨域方式，通过在服务器端设置`Access-Control-Allow-Origin`响应头来允许特定的域进行跨域请求。服务器返回该头后，浏览器会允许指定域的Ajax请求访问资源。 2. Iframe的`srcdoc`属性和`postMessage` API可以用于完全跨域的通信。`srcdoc`可以让iframe加载自定义内容，而`postMessage`允许不同源的窗口之间传递消息，实现跨域数据交换。 3. 图片ping跨域：利用图片请求不受同源策略限制的特性，可以通过发送一张小图片（如1像素的PNG）作为请求，服务端接收到请求后返回需要的数据，通常数据会编码在URL的查询参数中。 4. WebSocket是一种实时通信协议，支持跨域，允许客户端与服务器建立持久连接，双向通信。 JavaScript的跨域技术主要是通过设置`document.domain`、JSONP、CORS、`postMessage`、图片ping和WebSocket等方式来突破同源策略的限制。在实际开发中，选择哪种方法取决于具体的需求和浏览器的兼容性。正确理解和运用这些技术，可以有效地提升前端应用的功能和用户体验。"