转自：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，就可以实现父页面调用子页面的函数，代码如下： 
页面一：

  1. <html>
  2. <head>
  3. <script>
  4. document.domain = "xx.com";
  5. function aa(){
  6. alert("p");
  7. }
  8. </script>
  9. </head>
  10. <body>
  11. <iframe src="http://localhost:8080/CmsUI/2.html" id="i">
  12. </iframe>
  13. <script>
  14. document.getElementById('i').onload = function(){
  15. var d = document.getElementById('i').contentWindow;
  16. d.a();
  17. };
  18. </script>
  19. </body>
  20. </html>

页面二：

  1. <html>
  2. <head>
  3. <script>
  4. document.domain = "xx.com";
  5. function a(){
  6. alert("c");
  7. }
  8. </script>
  9. </head>
  10. <body>
  11. </body>
  12. </html>

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

2.基于script标签实现跨域

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

  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文件都可以实现跨域。

三种方法实现js跨域访问的更多相关文章

  1. [转] 三种方法实现js跨域访问

    1.基于iframe实现跨域 基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn ...

  2. 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 ...

  3. 前端跨域问题相关知识详解（原生js和jquery两种方法实现jsonp跨域）

    1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...

  4. 从壹开始前后端分离 [.netCore 填坑 ] 三十三║ ⅖ 种方法实现完美跨域

    缘起 哈喽大家周四好,趁着大家在团建的时候花一个下午学点儿东西,也是督促大家学习哟,希望大家看到老张的文章,可以有一丢丢的学习动力.不过话说过来,该吃的团建还是要去的,不能学我呀 [ /(ㄒoㄒ)/~ ...

  5. js跨域访问

    什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首 ...

  6. 【Todo】JS跨域访问问题的解决

    做双十一,需要在主会场页面,嵌入我们产品的JS豆腐块.而这个豆腐块需要调用我们后端的数据接口,涉及跨域访问. 参考 http://www.cnblogs.com/2050/p/3191744.html ...

  7. HTML5结合CSS的三种方法+结合JS的三种方法

    HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...

  8. 解决Js跨域访问的问题

    1,最近有个需求,用Js获取Html标签<input type="file"/>的路径!遇到代码拒绝访问,提示安全验证,不允许跨域访问,简单的设置一下浏览器即可,不过对 ...

  9. JS跨域访问问题

    js跨域了. 只能给几个资料参考了:http://blog.csdn.net/lovingprince/article/details/2954675 http://www.kuqin.com/web ...

随机推荐

  1. MyBatis 用户表记录数查询

    搭建MyBatis开发环境,实现用户表记录数查询 1.在MyEclipse中创建工程,导入MyBatis的jar包

  2. ios7开发学习笔记-包括c oc 和ios介绍

    请查看我的新浪资料分享 http://iask.sina.com.cn/u/2430843520

  3. (转) 新的开始之Win7、CentOS 6.4 双系统 硬盘安装

    http://blog.csdn.net/cnclenovo/article/details/11358447

  4. firefox访问失败的时间设置错误问题

    在新装系统, 安装firefox后, 访问网页: baidu时 总是自动将http转换为https, 这个是baidu服务器的设置问题, 怪不到ff bd说,是ocsp证书错误, 然后将ocsp认证q ...

  5. HTML 标准属性 和 事件属性

    HTML的公共属性 HTML 和 XHTML 标签支持的标准属性 核心属性 (Core Attributes) 以下标签不提供下面的属性:base.head.html.meta.param.scrip ...

  6. HDOJ 2089 不要62

    不要62 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  7. 完善dedecms站内搜索代码,为搜索结果添加第*页

    自那些平凡而伟大的程序猿开发了内容管理系统(cms),为了让看客们更快地找到自己感兴趣的内容,他们不断完善站内搜索代码,形成了一个小型的站内搜索引擎.可能有些网站模板设计师没考虑到seo的问题,很多站 ...

  8. unity3d webplayer 16:9 居中显示模板

    原地址:http://www.cnblogs.com/88999660/archive/2013/04/12/3016773.html <!DOCTYPE html PUBLIC "- ...

  9. hiho一下第88周《Coordinates》

    题目大意 给定数字P,Q,求出所有P和Q的约数p,q能够组成的不重复数字对(p,q) 解题思路 作为本场比赛的第一题,本题的难度在于考察选手是否有基本的编程能力. 本题中需要求出P,Q所有约数组成的数 ...

  10. Launchpad添加openPGP keys

    转自: https://help.ubuntu.com/community/GnuPrivacyGuardHowto mac下: http://notes.jerzygangi.com/the-bes ...