使用document.domain和iframe实现站内AJAX跨域

WEB前端开发 2010-07-21 09:42:37 累计浏览 4,628 次

本机暂存

内容概览

这篇讲的是如何解决同站不同域名间的数据请求问题。比如，一个网站可能同时使用 `www.css88.com` 和 `css88.com` 这两个域名，但它们在浏览器看来是完全不同的域，受同源策略保护，直接的AJAX请求会被拦截。文章点明了这是前端开发中常见的“跨域”痛点，传统Ajax对此无能为力。

作者给出的核心方案是结合使用 `document.domain` 属性与iframe。具体思路是，让需要通信的两个域都设置相同的 `document.domain` 值（比如都设置为父域 `css88.com`），从而在浏览器层面将它们“伪装”成同源。再通过一个隐藏的iframe作为中间通道，配合JavaScript在父页面与iframe之间安全地传递数据，最终实现跨域的AJAX效果。

这个方法巧妙利用了浏览器的机制，为解决特定场景（如同一主站下的多个子域名之间）的跨域通信问题提供了一种轻量且直接的思路，避免了搭建中间层服务的复杂性。

站内AJAX跨域可以通过document.domain和iframe实现，比如www.css88.com、js.css88.com、css88.com这3个域名其实是3个不同的域，很多时候www.css88.com和css88.com打开的可能是用一个页面，但是，他们确实是不同的域，比如www.css88.com的页面通过ajax无法直接获取css88.com域下的数据，这是由于js的安全性引起的。

不过我们可以通过document.domain和iframe实现在站内的ajax跨域。

查看demo：http://www.css88.com/demo/iframe-domain/

还有一点要注意，这个方法需要在iframe加载后才能使用！

同分类推荐文章

translateZ() （2026-06-25 21:18:56）
translateY() （2026-06-25 21:17:56）
translateX() （2026-06-25 21:16:01）

查看更多前端文章 →

建议继续学习

使用python/casperjs编写终极爬虫-客户端App的抓取（累计阅读 12,961）
YSLOW法则中，为什么yahoo推荐用GET代替POST？（累计阅读 11,837）
JSONP与POST方式请求（累计阅读 11,294）
jQuery插件---轻量级的弹出窗口wBox. （累计阅读 10,772）
iframe大小自适应（累计阅读 10,057）
10个强大的Ajax jQuery文件上传程序（累计阅读 8,853）
iframe里src="about:blank"的问题。（累计阅读 8,087）
优雅绝妙的Javascript跨域问题解决方案（累计阅读 8,067）
跨域请求的iframe解决方案（1）（累计阅读 6,500）
nyroModal：强大的jQuery弹出层插件（累计阅读 5,914）