- 浏览: 245006 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (232)
- 瞎扯两句 (8)
- 操作系统 (5)
- 工作笔记 (33)
- 设计模式 (1)
- java (57)
- Java IDE (7)
- hibernate (17)
- oracle (46)
- ms sql (2)
- spring (9)
- struts2 (0)
- javascript (16)
- java_code (2)
- java之集合 (2)
- java之线程 (4)
- java之IO (4)
- java之虚拟机 (6)
- java之异常 (0)
- EJB (4)
- XML (4)
- 数据结构-算法 (2)
- 架构设计 (5)
- 配置信息 (2)
- 阅读笔记 (6)
- IT专业英语 (1)
- PI (0)
- 单元测试 (1)
最新评论
javascript跨域访问
- 博客分类:
- javascript
javascript跨域访问是web开发者经常遇到的问题。
A.同源策略
同源策略,它是由Netscape提出的一个著名的安全策略。
现在所有支持JavaScript 的浏览器都会使用这个策略。
所谓同源是指,域名,协议,端口相同。
当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面
当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,
即检查是否同源,只有和百度同源的脚本才会被执行。
B. 跨域
那么跨域指的就是 域名,协议,端口有一个不相同
什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现javascript跨域方法:
1.基于iframe实现跨域
基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个页面中同时添加document.domain,就可以实现父页面调用子页面的函数,代码如下:
页面一:
Html代码
页面二:
Html代码
这时候父页面就可以调用子页面的a函数,实现js跨域访问
2.基于script标签实现跨域
script标签本身就可以访问其它域的资源,不受浏览器同源策略的限制,可以通过在页面动态创建script标签,代码如下:
Java代码
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文件都可以实现跨域。
A.同源策略
同源策略,它是由Netscape提出的一个著名的安全策略。
现在所有支持JavaScript 的浏览器都会使用这个策略。
所谓同源是指,域名,协议,端口相同。
当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面
当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,
即检查是否同源,只有和百度同源的脚本才会被执行。
B. 跨域
那么跨域指的就是 域名,协议,端口有一个不相同
什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现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 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代码
<html> <head> <script> document.domain = "xx.com"; function a(){ alert("c"); } </script> </head> <body> </body> </html>
这时候父页面就可以调用子页面的a函数,实现js跨域访问
2.基于script标签实现跨域
script标签本身就可以访问其它域的资源,不受浏览器同源策略的限制,可以通过在页面动态创建script标签,代码如下:
Java代码
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文件都可以实现跨域。
发表评论
-
regex
2013-05-14 12:18 700var regexEnum = { integ ... -
js Date() 对象 及 格式化
2013-04-01 17:59 8182011-11-25 11:39:11| 分类 ... -
jquery学习笔记
2013-03-01 12:04 7371. window中的一些对象 json相关: if ... -
javascript 阅读笔记
2013-02-25 16:13 7881. 未用var显示的声明时 ... -
JS中函数声明与函数表达式的不同- -1
2013-02-25 15:50 734Js中的函数声明是指下面的形式: function fun ... -
跨域访问以及同源策略
2013-01-10 17:40 7981.同源策略 同源策略,它是由Netscape提出的一个著 ... -
ffm code
2013-01-04 11:44 411. 插件开始的;是为了防止外部的js不规范引起问题而添加的。 ... -
XSLT
2012-12-02 21:08 706<?xml version="1.0" ... -
JS事件模型小结
2012-12-02 19:52 627JS事件模型小结 详细请 ... -
frameset,frame,iframe的区别
2012-05-09 15:17 2662这个三个都是html的标签 ... -
js 创建对象与方法总结
2012-04-10 13:33 881前言 其实和java类似, ... -
XMLHttpRequest工作原理
2012-02-24 17:21 2394XMLHttpRequest对象是当今 ... -
XML Element 相关方法
2012-02-17 16:02 865Element l_o_MessageRoot = ... -
request.getParameterNames()方法
2012-02-17 15:24 1165request.getParameterNames()方法是将 ... -
初学 dhtmlxSuite
2012-02-13 15:36 2279点开铁道部订票网站的源码,可看到dhtmlxSuite的应用。 ... -
33个JavaScript自动完成脚本
2012-02-13 15:23 1031http://www.pqshow.com/design/ji ...
相关推荐
Javascript跨域访问解决方案 个人在网上搜集的资料,用于传输信息,不提倡下载
...
...
由于安全方面的考虑,Javascript被限制了跨域访问的能力,但是有时候我们希望能够做一些合理的跨域访问的事情,那么怎么办呢?
javascript 跨域访问 综合解决方案
javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现javascript跨域方法: 1.基于iframe实现跨域 基于iframe实现的跨域要求两个域...
javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现javascript跨域方法: 1.基于iframe实现跨域 基于iframe实现的跨域要求两个域...
jquery跨域访问服务器,用的是一个jquery的插件,要配合jquery使用。 <script type="text/javascript"> $(document).ready( function(){ $.get('http://smallbridge.sinaapp.com/', function(res){ $('#testdiv')....
NULL 博文链接:https://y-l.iteye.com/blog/2074102
本文实例讲述了JavaScript同源策略和跨域访问。分享给大家供大家参考,具体如下: 1. 什么是同源策略 理解跨域首先必须要了解同源策略。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。 何谓同源: URL由...
javascript跨域访问的类,支持所有主流浏览器,包括IE6+,FileFox,Chrome,Safari,Opera等,包含了目前所有的主流跨域方式
主要介绍了JavaScript cookie 跨域访问之广告推广 的相关资料,需要的朋友可以参考下
<script type="text/javascript"> $(document).ready(function() { $.ajaxf.install('/Files/zsea/AJAX.swf'); $("#fdemo_get").click(function() { $.ajaxf.getText("http://www.youku.com/", '', function(r) ...
最近项目中需要跨域调用其他项目的数据,其他项目也是使用的EasyUI的datagrid组件,开始以为直接在datagrid的... 搜索了下JavaScript跨域调用的文章“JavaScript跨域访问问题解决方法”得到启发,发现原来是因为easyU
arcgis api for js 4.x 在tomcat离线部署后,跨域访问问题,彻底解决。
2.2.17-win32-x86-no_ssl.msi,安装完成后,我们需要配置一下,由于jwchat是用javacript去和openfire进行通讯的,所以他们之间的通讯是基于http的,但是由于浏览器为了安全性是不允许javascript跨域访问的。...
javascript 跨域问题以及解决办法 什么是跨域问题? 跨域这个问题是由于浏览器的同源策略引起的,请求的URL地址,必须与浏览器的URL是相同协议、相同域名、相同端口的,否则是不允许访问的 浏览器URL 要访问的...
个人学习时编写的代码,该案例用于演示Ajax的跨域访问问题。!!!补充说明:导入工程时需要选择导入maven工程!上传仅为学习交流,也为自己下载方便!水平有限不喜勿喷。在README.txt中有对项目的详细说明!
在网站调用加载评论等信息的时候遇到了不同域名间javascript不能执行的问题,一直都在加载中显示不出来,而换个网址访问的话就能正确显示,一直没去注意浏览器提示的错误信息: