- 1、本文档共11页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
JS跨域问题详解
javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现javascript跨域方法: 1.基于iframe实现跨域
???? 基于iframe实现的跨域要求两个域具有,这种特点,也就是两个页面必须属于一个基础域(例如都是,或是),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个页面中同时添加document.domain,就可以实现父页面调用子页面的函数,代码如下: 页面一: Html代码?
HYPERLINK /article/70673.htm ?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20html
head
?script
?document.domain = ;
?function aa(){
??alert(p);
?}
?/script
/head
body
?iframe src= HYPERLINK http://localhost:8080/CmsUI/2.html 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代码?
HYPERLINK /article/70673.htm ?
1
2
3
4
5
6
7
8
9
10
11
12html
?head
?script
?document.domain = ;
?function a(){
?alert(c);
??}
?/script
?/head
?body
?/body
/html 这时候父页面就可以调用子页面的a函数,实现js跨域访问
2.基于script标签实现跨域
???? script标签本身就可以访问其它域的资源,不受浏览器同源策略的限制,可以通过在页面动态创建script标签,代码如下:
Java代码?
HYPERLINK /article/70673.htm ?
1
2
3var script = document.createElement(script);
script.src = HYPERLINK /js/ /js/*.js;
document.body.appendChild(script);???? 这样通过动态创建script标签就可以加载其它域的js文件,然后通过本页面就可以调用加载后js文件的函数,这样做的缺陷就是不能加载其它域的文档,只能是js文件,jsonp便是通过这种方式实现的,jsonp通过向其它域传入一个callback参数,通过其他域的后台将callback参数值和json串包装成javascript函数返回,因为是通过script标签发出的请求,浏览器会将返回来的字符串按照javascript进行解析执行,实现了域与域之间的数据传输。 jquery中对jsonp的支持也是基于此方案。
3.后台代理方式
???? 这种方式可以解决所有跨域问题,也就是将后台作为代理,每次对其它域的请求转交给本域的后台,本域的后台通过模拟http请求去访问其它域,再将返回的结果返回给前台,这样做的好处是,无论访问的是文档,还是js文件都可以实现跨域。
下表给出了相对 HYPERLINK /dir/page.html /dir/page.html同源检测的结果:
?
要解决跨域的问题,我们可以使用以下几种方法:
一、通过jsonp跨域
在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的。但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的。
比如,有个a.html页面,它里面的代码需要利用ajax获取一个不同域上的json数据,假设这个json数据地址是 HYPERLINK /data.php /data.php,那么a.html中的代码就可以这样:
?
我们看到获取数据的地址后面还有一个callback参数,按惯例是用这个参数名,但是你用其他的也一样。当然如果获取数据的jsonp地址页面不是你自己能控制的,就得按照提供数据的那一方的规定格式来操作了。
因为是当做一个js文件来引入的,所以 HYPERLI
您可能关注的文档
- ISO-13485专业培训教材.pptx
- ISO14001普通机械制造行业审核作业指导书.doc
- 安全生产文明施工标准化工地创建讲解.ppt
- 安全生产有关法律法规及政策讲解.ppt
- ISO9001-2005标淮条文讲解.ppt
- 安全生产标准化工作相关文件解读讲解.ppt
- ISO13485内审检查表(完整各部门).doc
- 安全生产标准化建设(樊晶光)讲解.ppt
- ISO9001-2015标准条款7培训教材.ppt
- istory-of-english-development.ppt
- 10《那一年,面包飘香》教案.docx
- 13 花钟 教学设计-2023-2024学年三年级下册语文统编版.docx
- 2024-2025学年中职学校心理健康教育与霸凌预防的设计.docx
- 2024-2025学年中职生反思与行动的反霸凌教学设计.docx
- 2023-2024学年人教版小学数学一年级上册5.docx
- 4.1.1 线段、射线、直线 教学设计 2024-2025学年北师大版七年级数学上册.docx
- 川教版(2024)三年级上册 2.2在线导航选路线 教案.docx
- Unit 8 Dolls (教学设计)-2024-2025学年译林版(三起)英语四年级上册.docx
- 高一上学期体育与健康人教版 “贪吃蛇”耐久跑 教案.docx
- 第1课时 亿以内数的认识(教学设计)-2024-2025学年四年级上册数学人教版.docx
文档评论(0)