1.基于iframe实现跨域

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

Html代码   
  1. <html>
  2. <head>
  3. <script>
  4. document.domain = "xx.com";
  5. function a(){
  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.aa();
  17. };
  18. </script>
  19. </body>
  20. </html>

页面二:

Html代码   
  1. <html>
  2. <head>
  3. <script>
  4. document.domain = "xx.com";
  5. function aa(){
  6. alert("c");
  7. }
  8. </script>
  9. </head>
  10. <body>
  11. </body>
  12. </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文件都可以实现跨域。

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

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

    转自:http://narutolby.iteye.com/blog/1464436 javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档 ...

  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. 从壹开始前后端分离 [.netCore 填坑 ] 三十三║ ⅖ 种方法实现完美跨域

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

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

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

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

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

  6. js跨域访问

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

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

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

  8. JS跨域访问问题

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

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

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

随机推荐

  1. linux下获取微秒级精度的时间【转】

    转自:https://blog.csdn.net/u011857683/article/details/81320052 使用C语言在linux环境下获得微秒级时间 1. 数据结构 int getti ...

  2. MySQL查看表的索引【转】

    查看表的索引: show index from table_name(表名) 结果列表中各字段的含义: · Non_unique 如果索引不能包括重复词,则为0.如果可以,则为1. · Key_nam ...

  3. 使用Boost Regex 的regex_search进行遍历搜索

    在regex_search函数中,会将找到的第一个匹配结果保存到一个smatch类中. 然而如果搜索字符串中有多个匹配结果,则需要自己实现了. 在smatch中,有两个成员,官方文档如下: itera ...

  4. T-SQL GROUP BY子句 分组查询

    SQL Server GROUP BY子句与SELECT语句协作使用,以将相同的数据分组. GROUP BY子句位于SELECT语句中的WHERE子句之后,位于ORDER BY子句之前. 语法 以下是 ...

  5. PYTHON深拷贝与浅拷贝

    浅拷贝就是对引用的拷贝,深拷贝就是对对象的资源的拷贝 浅拷贝 浅拷贝仅仅复制了容器中元素的地址 赋值的原则 1.赋值是将一个对象的地址赋值给一个变量,让变量指向该地址( 旧瓶装旧酒 ). 2.修改不可 ...

  6. HBase在HDFS上的目录介绍

    总所周知,HBase 是天生就是架设在 HDFS 上,在这个分布式文件系统中,HBase 是怎么去构建自己的目录树的呢? 第一,介绍系统级别的目录树. 一.0.94-cdh4.2.1版本 系统级别的一 ...

  7. python 函数 动态参数 和嵌套

    1.动态参数 是可以接收任意的参数.一种方式, 1,位置的动态传参, 写法是: *参数名 接收的参数是tuple类型举个例子:def yue(*food): print(food)yue(" ...

  8. sublime text3 golang插件(golang build)

    1 前言 先前条件: sublime text3:下载地址:http://www.sublimetext.com/3 golang:下载地址:https://golang.google.cn/dl/ ...

  9. 执行原生SQL语句的方式

    原生sql语句 cursor方法:from api.models import *from django.db import connection,connectionscursor=connecti ...

  10. python-迭代器、生成器、内置函数及面向过程编程

    一.迭代器 迭代器是迭代取值的工具,迭代是一个重复的过程,每一次重复都是基于上一次的结果而来的. 为什么要用迭代器呢? 1.可以不依赖索引取值 2.同一时刻在内存中只有一个值,不会过多的占用内存 如何 ...