JavaScript 实现跨域访问的三种常用方法
本文介绍JavaScript实现跨域访问的三种方法：基于iframe的document.domain设置、利用script标签动态加载资源的JSONP技术，以及通过后台代理转发请求的方案。详细解析各方法的原理、代码实现及适用场景，帮助开发者解决跨域限制问题。
基于 iframe 实现跨域
JavaScript 跨域访问是 Web 开发者经常遇到的问题。所谓跨域，是指一个域上加载的脚本获取或操作另一个域上的文档属性。下面将列出三种实现 JavaScript 跨域的方法： 1. 基于 iframe 实现跨域 基于 iframe 实现的跨域要求两个域具有 aa.xx.com、bb.xx.com 这种特点，也就是两个页面必须属于一个基础域（例如都是 xxx.com，或是 xxx.com.cn），使用同一协议（例如都是 http）和同一端口（例如都是 80），这样在两个页面中同时添加 document.domain，就可以实现父页面调用子页面的函数，代码如下： 页面一：
<html>
<head>
<script>
document.domain = "xx.com";
function aa(){
alert("p");
}
</script>
</head>
<body>
<iframe src="http://localhost:8080/CmsUI/2.html" id="i">
</iframe>
<script>
document.getElementById('i').onload = function(){
var d = document.getElementById('i').contentWindow;
d.a();
};
</script>
</body>
</html> 页面二：
<html>
<head>
<script>
document.domain = "xx.com";
function a(){
alert("c");
}
</script>
</head>
<body>
</body>
</html>
基于 script 标签实现跨域
这时候父页面就可以调用子页面的 a 函数，实现 JS 跨域访问 2. 基于 script 标签实现跨域 script 标签本身就可以访问其它域的资源，不受浏览器同源策略的限制，可以通过在页面动态创建 script 标签，代码如下：
var script = document.createElement('script');
script.src = "http://aa.xx.com/js/*.js";
document.body.appendChild(script);
后台代理方式
这样通过动态创建 script 标签就可以加载其它域的 js 文件，然后通过本页面就可以调用加载后 js 文件的函数，这样做的缺陷就是不能加载其它域的文档，只能是 js 文件，jsonp 便是通过这种方式实现的，jsonp 通过向其它域传入一个 callback 参数，通过其他域的后台将 callback 参数值和 json 串包装成 javascript 函数返回，因为是通过 script 标签发出的请求，浏览器会将返回来的字符串按照 javascript 进行解析执行，实现了域与域之间的数据传输。 jquery 中对 jsonp 的支持也是基于此方案。 3. 后台代理方式 这种方式可以解决所有跨域问题，也就是将后台作为代理，每次对其它域的请求转交给本域的后台，本域的后台通过模拟 http 请求去访问其它域，再将返回的结果返回给前台，这样做的好处是，无论访问的是文档，还是 js 文件都可以实现跨域。
以上 JS 实现跨域访问的三种方法分先给大家，大家仔细研究学习，一定会有所收获
JS读取本地文件时报错或无响应的常见原因
2026-11-05 16:32:31
let、const与var的区别：JavaScript变量声明最佳实践
2026-11-05 14:16:38
JS中直接定义静态二维数组的字面量写法
2026-11-05 14:16:08
JS 怎么查找字符串中所有匹配项的位置
2026-11-05 14:15:53
JavaScript新手常犯的编码错误与最佳实践指南
2026-11-04 22:12:38