`

三种方法实现js跨域访问

阅读更多
   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跨域访问后台

    本文主要介绍了JS跨域访问后台的相关知识点,包括了跨域的概念、原因、解决方案以及具体的实现方法。通过理解和应用这些知识点,可以有效地解决前后端分离场景下的跨域问题。需要注意的是,除了技术实现外,还应该...

    js实现跨域访问的三种方法

    javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现javascript跨域方法: 1.基于iframe实现跨域 基于iframe实现的跨域要求两个域...

    JS跨域访问解决方案总结[参照].pdf

    JS 跨域访问解决方案总结为我们提供了一种更安全、方便的跨域请求方式来融合(Mashup)自己的 Web 应用。这种方式可以将请求分摊到不同的服务器,减轻单个服务器压力以提高响应速度;另外一种好处是可以将不同的业务...

    解决JS跨域访问IFrame的解决方案

    "解决JS跨域访问IFrame的解决方案"这一主题关注的就是如何克服这个限制,使得在JSP页面中嵌入的跨域IFrame能够正常通信。下面我们将详细探讨这个问题以及可能的解决方案。 首先,理解同源策略是关键。同源策略是...

    js+jsp+json+tomcat跨域访问

    接下来,我们将探讨如何实现js+jsp+json+tomcat的跨域访问。 1. **jQuery的JSONP(JSON with Padding)** JSONP是一种绕过同源策略的方法,它利用了HTML中`&lt;script&gt;`标签不受同源策略限制的特性。在jQuery中,可以...

    js解决跨域访问问题

    ### JS解决跨域访问问题详解 #### 一、引言 在现代Web开发中,跨域访问问题是开发者经常面临的一个挑战。特别是在使用JavaScript进行前后端交互时,由于浏览器的同源策略限制,开发者经常会遇到跨域问题。本文将...

    怎样实现Ajax 跨域访问

    本文将详细介绍五种实现Ajax跨域访问的方法。 #### 一、使用JSONP(JSON with Padding) JSONP是一种常用的跨域数据获取方式,其原理是利用`&lt;script&gt;`标签没有跨域限制的特点来实现跨域请求。请求时,在URL中添加...

    JQury实现Ajax跨域访问

    总结来说,jQuery通过JSONP和CORS两种方式实现了Ajax的跨域访问。开发者可以根据实际需求选择合适的方法,同时注意安全性,确保数据交互的顺利进行。在具体实践中,可以参考提供的博客链接(已给出但无法点击,请...

    JS跨域访问解决方案总结.pdf

    标题《JS跨域访问解决方案总结.pdf》指明文档的核心内容是关于JavaScript跨域访问问题的解决方法。跨域访问问题是指由于浏览器的同源策略限制,网页中JavaScript代码出于安全原因不能访问另一个源(域名、协议或端口...

    golang实现跨域访问的方法

    在Golang中实现跨域访问,主要是为了克服Web应用程序中由同源策略导致的限制,使得前端能够通过Ajax从不同源获取数据。本篇将详细解释如何在Golang后端设置CORS(跨域资源共享)策略,以便允许前端进行跨域请求。 ...

    JSONP实现Ajax跨域访问

    ### JSONP实现Ajax跨域访问 #### 一、引言 JSONP(JSON with Padding)是一种用于解决跨域数据访问的技术。由于同源策略(Same-Origin Policy)的存在,JavaScript/Ajax只能请求同源的资源,这给需要跨域访问数据...

    Javascript跨域访问解决方案

    总结来说,JavaScript跨域访问有多种解决方案,开发者应根据具体需求和环境选择合适的方法。JSONP适合简单的GET请求,CORS更通用且安全,代理服务器适用于服务器无跨域控制能力的情况,WebSocket则适用于需要实时...

    JS跨域访问解决方案总结

    JavaScript跨域访问解决方案详解 在Web开发中,由于浏览器的安全策略——同源策略(Same origin policy),一个域名下的脚本无法直接访问另一个不同域名的资源。同源策略规定,只有当两个页面的协议、域名和端口...

    javascript跨域访问的方法.pdf

    JavaScript跨域访问是Web开发中的常见挑战,由于浏览器的安全策略——同源策略,JavaScript通常只能访问与当前页面同源(协议、域名、端口都相同)的资源。然而,为了实现不同源之间的通信,开发者可以采取多种方法...

    JS跨域访问解决方案的总结.doc

    JavaScript跨域访问解决方案 在Web开发中,由于同源策略的限制,JavaScript通常只能与同一协议、域名和端口的服务器进行通信。然而,随着Web应用程序的复杂性和交互性增加,跨域请求变得越来越普遍,比如加载外部...

    Ajax实现跨域访问的三种方法

    本文将详细介绍使用Ajax实现跨域访问的三种方法,并对每种方法进行解析,着重介绍第三种方法。 一、什么是跨域 跨域是指浏览器限制了来自不同源的页面进行资源访问的一种策略。一个源由协议、子域名、主域名和端口...

    javascript/jquery 跨域访问

    JavaScript 和 jQuery 是Web开发中广泛使用的两种技术,它们在实现跨域访问方面起着关键作用。跨域访问是Web应用程序中常见的需求,特别是在Ajax请求、API调用或数据共享时。由于浏览器的安全策略,不同域名、协议或...

Global site tag (gtag.js) - Google Analytics