跨域整理

三种方法实现js跨域访问

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

1.基于iframe实现跨域

基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个页面中同时添加document.domain,就可以实现父页面调用子页面的函数,代码如下:

页面一:

Html代码

<html>
<head>
  <script>
   document.domain = "xx.com";
    function a(){
      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.aa();  

 };
   </script>
 </body>
</html>  

页面二:

Html代码

<html>
 <head>
  <script>
    document.domain = "xx.com";
    function aa(){
    alert("c");
     }
  </script>
 </head>
 <body>
 </body>
</html>  

这时候父页面就可以调用子页面的aa函数,实现js跨域访问

2.基于script标签实现跨域

script标签本身就可以访问其它域的资源,不受浏览器同源策略的限制,可以通过在页面动态创建script标签,代码如下:

Java代码

  1. var script = document.createElement(‘script‘);
  2. script.src = "http://aa.xx.com/js/*.js";
  3. document.body.appendChild(script);

这样通过动态创建script标签就可以加载其它域的js文件,然后通过本页面就可以调用加载后js文件的函数,这样做的缺陷就是不能加载其它域的文档,只能是js文件,jsonp便是通过这种方式实现的,jsonp通过向其它域传入一个callback参数,通过其他域的后台将callback参数值和json串包装成javascript函数返回,因为是通过script标签发出的请求,浏览器会将返回来的字符串按照javascript进行解析执行,实现了域与域之间的数据传输。 
jquery中对jsonp的支持也是基于此方案。

3.后台代理方式

这种方式可以解决所有跨域问题,也就是将后台作为代理,每次对其它域的请求转交给本域的后台,本域的后台通过模拟http请求去访问其它域,再将返回的结果返回给前台,这样做的好处是,无论访问的是文档,还是js文件都可以实现跨域。

出处:http://my.oschina.net/lwaif/blog/481154?p={{totalPage}}

http://www.jb51.net/article/48794.htm    javascript跨域的4种方法和原理详解

http://blog.csdn.net/joyhen/article/details/21631833      前端解决跨域问题的8种方案(最新最全)

时间: 2024-08-13 16:10:49

跨域整理的相关文章

跨域问题整理

跨域整理 跨域资源共享 CORS 对于web开发来讲,由于浏览器的同源策略,我们需要经常使用一些hack的方法去跨域获取资源,但是hack的方法总归是hack.直到W3C出了一个标准-CORS-”跨域资源共享”(Cross-origin resource sharing).它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制.首先来说 CORS 需要浏览器和服务端同时支持的,对于兼容性来说主要是ie10+,其它现代浏览器都是支持的.http://c

http与websocket两种协议下的跨域基于ASP.NET MVC--竹子整理

这段时间,项目涉及到移动端,这就不可避免的涉及到了跨域的问题.这是本人第一次接触跨域,有些地方的配置是有点麻烦,导致一开始的不顺. 至于websocket具体是什么意义,用途如何:请百度. 简单说就是建立一个基于互联网的实时通信. 在这里整理下这些内容,方便日后回顾. 一:介绍了WebSocket下的基于SignalR的跨域与不跨域例子 二:简单介绍了Http下的跨域问题 Ⅰ.WebSocket下的跨域 如果使用原生的方法来开发WebSocket应用,还是比较复杂的,不过好在Asp.net给我们

Asp.Net Core WebAPI入门整理(三)跨域处理

一.Core  WebAPI中的跨域处理  1.在使用WebAPI项目的时候基本上都会用到跨域处理 2.Core WebAPI的项目中自带了跨域Cors的处理,不需要单独添加程序包 3.使用方法简单 二.使用实例 1.全局配置中启用跨域处理,命名为'any',任何都可以访问 public void ConfigureServices(IServiceCollection services) { //配置跨域处理 services.AddCors(options => { options.AddP

关于跨域的处理的几种方法的整理

跨域是经常遇到的这里不再说跨域什么意思了,协议不同,端口不同,域名不同是为跨域: 解决方法: 1,后台设置代理,比如把上海有个服务器,我北京相用,可以北京后台代理, 2,前端采取jsop来获取数据 代码示例:此处后台是node.js简单实现,页面端口localhost:3020 前端:$(function(){ $("#btn").click(function(){ $.ajax({ method:"get", url:"http://127.0.0.1:

跨域方法整理

在讲跨域前必须了解同源策略:同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当一个百度浏览器执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行.简单的一句话就是:"如果两个页面拥有相同的协议(protocol),端口(如果指定),和主机,那么这两个页面就属于同一个源(origin).&quo

JS跨域知识整理

在“跨域”一词经常性地出现以前,我们其实已经频繁地使用它了.如在A网站的img,src指向B网站的某一图片地址,毫无疑问,这在通常情况下都是能正常显示的(且不论防盗链技术):同样,可以使script标签的src属性指向其它网站的脚本资源(在某些情况下甚至鼓励这样做,以便充分利用其它网站的负载优势,减小自身服务器的并发量).然而,如若使用js去主动请求其它网站的数据,比如ajax方式,就会遇到让人郁闷的跨域问题,这也是我们平常所说的跨域.由于安全原因,跨域访问是被各大浏览器所默认禁止的.这里涉及到

跨域请求数据解决方案整理

转自:http://www.cnblogs.com/xyang/archive/2012/05/18/2507845.html 跨域请求数据解决方案主要有如下解决方法: JSONP方式 表单POST方式 服务器代理 Html5的XDomainRequest Flash request 分开说明: 一.JSONP: 直观的理解: 就是在客户端动态注册一个函数 function a(data),然后将函数名传到服务器,服务器返回一个a({/*json*/})到客户端运行,这样就调用客户端的 func

HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术

最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的整理思路,写到博客里还能做个备忘. 1) 跨域通讯 现在做企业项目,前端很不自然的会大量使用iframe标签,我以前在文章里提到iframe是一个效率极其低下的标签,但是如果项目没有什么性能的苛求,使用iframe还是非常的方便的. 使用iframe经常碰到父子窗体通讯的问题,我们看看下面的代码:

常用跨域方法实践(一)

这几天看了鬼道师兄的<跨终端Web>这本书,该书从解决实际业务出发,讲述了跨终端的优势与未来,受益良多.其中,书中第九章介绍了作者在阿里内部的一个参赛作品Storage,该作品巧妙的使用了跨域知识,让我见识到跨域其实不仅仅是JSONP.以前,对前端跨域这块或多或少有点了解,但真正动手实践的不是很多.于是,这段时间我好好整理了常用跨域方法的具体实现.本文,主要介绍了JSONP和CORS的实现方式. 相关概念: 只要协议.域名.端口有任何一个不同,都被当作是不同的域 JavaScript出于安全方