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>
这时候父页面就可以调用子页面的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实现跨域访问的方法。 首先,基于iframe实现跨域是一种较为常见的做法。这种方法要求两个域都属于同一个基础域,即它们的域名后缀相同(如***或***),且协议和端口号也相同(如都是http...
本文主要介绍了JS跨域访问后台的相关知识点,包括了跨域的概念、原因、解决方案以及具体的实现方法。通过理解和应用这些知识点,可以有效地解决前后端分离场景下的跨域问题。需要注意的是,除了技术实现外,还应该...
JS 跨域访问解决方案总结为我们提供了一种更安全、方便的跨域请求方式来融合(Mashup)自己的 Web 应用。这种方式可以将请求分摊到不同的服务器,减轻单个服务器压力以提高响应速度;另外一种好处是可以将不同的业务...
"解决JS跨域访问IFrame的解决方案"这一主题关注的就是如何克服这个限制,使得在JSP页面中嵌入的跨域IFrame能够正常通信。下面我们将详细探讨这个问题以及可能的解决方案。 首先,理解同源策略是关键。同源策略是...
接下来,我们将探讨如何实现js+jsp+json+tomcat的跨域访问。 1. **jQuery的JSONP(JSON with Padding)** JSONP是一种绕过同源策略的方法,它利用了HTML中`<script>`标签不受同源策略限制的特性。在jQuery中,可以...
### JS解决跨域访问问题详解 #### 一、引言 在现代Web开发中,跨域访问问题是开发者经常面临的一个挑战。特别是在使用JavaScript进行前后端交互时,由于浏览器的同源策略限制,开发者经常会遇到跨域问题。本文将...
本文将详细介绍五种实现Ajax跨域访问的方法。 #### 一、使用JSONP(JSON with Padding) JSONP是一种常用的跨域数据获取方式,其原理是利用`<script>`标签没有跨域限制的特点来实现跨域请求。请求时,在URL中添加...
总结来说,jQuery通过JSONP和CORS两种方式实现了Ajax的跨域访问。开发者可以根据实际需求选择合适的方法,同时注意安全性,确保数据交互的顺利进行。在具体实践中,可以参考提供的博客链接(已给出但无法点击,请...
标题《JS跨域访问解决方案总结.pdf》指明文档的核心内容是关于JavaScript跨域访问问题的解决方法。跨域访问问题是指由于浏览器的同源策略限制,网页中JavaScript代码出于安全原因不能访问另一个源(域名、协议或端口...
在Golang中实现跨域访问,主要是为了克服Web应用程序中由同源策略导致的限制,使得前端能够通过Ajax从不同源获取数据。本篇将详细解释如何在Golang后端设置CORS(跨域资源共享)策略,以便允许前端进行跨域请求。 ...
### JSONP实现Ajax跨域访问 #### 一、引言 JSONP(JSON with Padding)是一种用于解决跨域数据访问的技术。由于同源策略(Same-Origin Policy)的存在,JavaScript/Ajax只能请求同源的资源,这给需要跨域访问数据...
总结来说,JavaScript跨域访问有多种解决方案,开发者应根据具体需求和环境选择合适的方法。JSONP适合简单的GET请求,CORS更通用且安全,代理服务器适用于服务器无跨域控制能力的情况,WebSocket则适用于需要实时...
JavaScript跨域访问是Web开发中的常见挑战,由于浏览器的安全策略——同源策略,JavaScript通常只能访问与当前页面同源(协议、域名、端口都相同)的资源。然而,为了实现不同源之间的通信,开发者可以采取多种方法...
JavaScript跨域访问解决方案 在Web开发中,由于同源策略的限制,JavaScript通常只能与同一协议、域名和端口的服务器进行通信。然而,随着Web应用程序的复杂性和交互性增加,跨域请求变得越来越普遍,比如加载外部...
本文将详细介绍使用Ajax实现跨域访问的三种方法,并对每种方法进行解析,着重介绍第三种方法。 一、什么是跨域 跨域是指浏览器限制了来自不同源的页面进行资源访问的一种策略。一个源由协议、子域名、主域名和端口...