三种方法实现js跨域访问
转自：http://narutolby.iteye.com/blog/1464436
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跨域访问
1.基于iframe实现跨域 基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn ...
- js跨域访问，No 'Access-Control-Allow-Origin' header is present on the requested resource
js跨域访问提示错误:XMLHttpRequest cannot load http://...... No 'Access-Control-Allow-Origin' header is prese ...
- 前端跨域问题相关知识详解（原生js和jquery两种方法实现jsonp跨域）
1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...
- 从壹开始前后端分离 [.netCore 填坑 ] 三十三║ ⅖ 种方法实现完美跨域
缘起 哈喽大家周四好,趁着大家在团建的时候花一个下午学点儿东西,也是督促大家学习哟,希望大家看到老张的文章,可以有一丢丢的学习动力.不过话说过来,该吃的团建还是要去的,不能学我呀 [ /(ㄒoㄒ)/~ ...
- js跨域访问
什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首 ...
- 【Todo】JS跨域访问问题的解决
做双十一,需要在主会场页面,嵌入我们产品的JS豆腐块.而这个豆腐块需要调用我们后端的数据接口,涉及跨域访问. 参考 http://www.cnblogs.com/2050/p/3191744.html ...
- HTML5结合CSS的三种方法+结合JS的三种方法
HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...
- 解决Js跨域访问的问题
1,最近有个需求,用Js获取Html标签<input type="file"/>的路径!遇到代码拒绝访问,提示安全验证,不允许跨域访问,简单的设置一下浏览器即可,不过对 ...
- JS跨域访问问题
js跨域了. 只能给几个资料参考了:http://blog.csdn.net/lovingprince/article/details/2954675 http://www.kuqin.com/web ...
随机推荐
- ASP.NET MVC 4 跨域
<system.webServer> <httpProtocol> <customHeaders> <add name="Access-Contro ...
- AppSettingManager
public class AppSettingManager { public static bool Update(string key, string value) { try { var con ...
- Java Socket发送与接收HTTP消息简单实现
在上次Java Socket现实简单的HTTP服务我 们实现了简单的HTTP服务,它可以用来模拟HTTP服务,用它可以截获HTTP请求的原始码流,让我们很清楚的了解到我们向服务发的HTTP消息的结 构 ...
- 5个常用Java代码混淆器 助你保护你的代码
[IT168 技术文档] 从事Java编程的人都知道,可以通过逆向工程反编译得到Java程序的源代码,这种反编译工具之一就是JAD.因此,为保护我们的劳动成果,尽可能给反编译人员制造障碍,我们可以使用 ...
- CMWAP CMWAP是手机上网使用的接入点的名称
CMWAP 锁定 本词条由“科普中国”百科科学词条编写与应用工作项目 审核 . CMWAP是手机上网使用的接入点的名称.CMWAP使用HTTP代理协议和WAP网关协议可以访问到Internet.移动用 ...
- 类型安全且自动管理内存的返回 std::string 的 sprintf 实现
在这篇博文里,我提到了一个例子,说的是使用C++实现类型安全的printf.这个例子很惊艳,但是在我写程序的时候,并非那么"迫切"地需要它出现在我的工具箱中,因为它并不比普通的pr ...
- 支付宝微信O2O大战，WiFi广告在夹缝中求生存
支付宝微信O2O大战,WiFi广告在夹缝中求生存 来自工信部的数据显示,截至2013年底,中国智能手机的保有量已经达到5.8亿台.国内平均有46%的时间选择WiFi上网. 商用WiFi已经成为了移动互 ...
- 微信用户量破6.5亿 首超移动QQ
腾讯控股有限公司昨日公布了微信和WeChat合并月活跃用户量达到6.5亿,同比再涨39%.QQ在移动智能终端月活为6.39亿,同比增长18%,尽管势头也不错,但这是第一次,微信干掉了移动QQ! 201 ...
- ubuntu 快速安装jre
sudo add-apt-repository ppa:webupd8team/java sudo apt-get update sudo apt-get install oracle-java7-i ...
- PHP无限极分类实现
简单版的PHP生成无限极分类代码.其中包括了数据库设计.以及输出分类HTML代码. SQL代码 CREATE TABLE `district` ( `id` int(10) unsigned NOT ...