- 浏览: 415356 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
IThead:
纠结了几天,用了你的方法,现在解决了,谢谢!
Eclipse 写Javascript卡死问题 -
Rubicon__:
你好,我在运用PageWidget这个类时,出现第一页翻到第二 ...
android翻书效果实现原理( 贝塞尔曲线绘制原理/点坐标计算) -
lionios:
如果不显示printDialog,则打印出来的是空白页,请问你 ...
Print打印机例子 -
rayln:
weiqiulai 写道哥们儿,我怎么没有看到监控队列的配置和 ...
JMS监听MQ实例 -
weiqiulai:
哥们儿,我怎么没有看到监控队列的配置和代码?
JMS监听MQ实例
通过Iframe进行跨域处理
- 博客分类:
- Js&JQuery
在漫长的前端开发旅途上,无可避免的会接触到ajax,而且一般情况下都是用在同一域下的ajax请求;但是如果请求是发生在不同的域下,请求就无法执行,并且会抛出异常提示不允许跨域请求,目前我没有找到明确的资料说明这是为什么,我觉得应该是出于安全性的考虑吧。纵然如此,要实现跨域访问的话,方法还是有的,而且不只一种,在这里介绍其中一种解决方案:如何利用iframe完成ajax的跨域请求。
如下图所示:域a.com的页面request.html(即http://a.com/request.html)里面嵌套了一个iframe指向域b.com的response.html,而response.html里又嵌套了域a.com的proxy.html。
要实现域a.com的request.html请求域b.com的process.php,可以将请求的参数通过URL传给response.html,由response.html向process.php发出真正的ajax请求(response.html与process.php都属于域b.com),然后将返回的结果通过URL传给proxy.html,最后由于proxy.html与request.html是在同一域下,所以可以在proxy.html利用window.top将结果返回给request.html完成跨域通信。
整个流程的思路其实非常清晰,真正的ajax请求并不是发生在域a.com,而是发生在域b.com;而域a.com是做了两件事,第一件事是由request.html完成,向域b.com发送传入参数;第二件事由proxy.html完成,把域b.com的响应数据递回给request.html。
跨域访问流程图
OK,接下来就是如何用代码实现了;在此之前先看文档结构:
http://a.com/
request.html
proxy.html
http://b.com/
response.html
process.php
1、先来看request.html,为了方便理解,我把js也放到了页面上:
复制代码 代码如下:
看代码和注释相信都很容易理解,这个页面其实就是要告诉response.html:我要让你执行你定义好的方法GetPerson,并且要用我给你的参数'{"id" : 24}'。可能感到模糊的就是为什么要把CallBack函数传给response.html,这是定义在本页面上的方法,response.html也不能执行它;看接下来的代码就会知道:response.html纯粹是负责将CallBack这个方法名传递给下一位仁兄proxy.html,而proxy.html拿到了CallBack这个方法名就可以执行了,因为proxy.html和request.html是同域的。
2、接下来我们看response.html的代码:
复制代码 代码如下:
这里其实就是接收来自request.html的请求得到请求参数和方法后向服务器process.php发出真正的ajax请求,然后将从服务器返回的数据以及从request.html传过来的回调函数名传递给proxy.html。
3、接下来看一下process.php的代码,比较简单:
这几句代码就不打算讲了,稍微有点PHP基础都能看懂,没PHP基础的应该都能看出个大概了,呵呵~~~
4、最后就是proxy.html了:
这里也是最后一步了,proxy终于拿到了request.html透过response.html传过来的回调函数名以及从response.html直接传过来的响应数据,利用window.top执行request.html里定义的回调函数。
实际应用中,proxy.html基本上可以是一个通用的代理,无需改动,如果需要用到很多跨域方法,这些方法都可以在域a.com里面加上,而域b.com就相当于定义一些接口供a.com调用,如GetPerson,当然这并不是真正的接口,只是方便理解,打个比方;另外,当然就是要把iframe隐藏起来。OK,最后还是奉上那句老话:所拥有的技术并不是最重要的,最重要的是学习的能力。
如下图所示:域a.com的页面request.html(即http://a.com/request.html)里面嵌套了一个iframe指向域b.com的response.html,而response.html里又嵌套了域a.com的proxy.html。
要实现域a.com的request.html请求域b.com的process.php,可以将请求的参数通过URL传给response.html,由response.html向process.php发出真正的ajax请求(response.html与process.php都属于域b.com),然后将返回的结果通过URL传给proxy.html,最后由于proxy.html与request.html是在同一域下,所以可以在proxy.html利用window.top将结果返回给request.html完成跨域通信。
整个流程的思路其实非常清晰,真正的ajax请求并不是发生在域a.com,而是发生在域b.com;而域a.com是做了两件事,第一件事是由request.html完成,向域b.com发送传入参数;第二件事由proxy.html完成,把域b.com的响应数据递回给request.html。
跨域访问流程图
OK,接下来就是如何用代码实现了;在此之前先看文档结构:
http://a.com/
request.html
proxy.html
http://b.com/
response.html
process.php
1、先来看request.html,为了方便理解,我把js也放到了页面上:
复制代码 代码如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>该页面的路径是:http://a.com/request.html</title> </head> <body> <p id="result">这里将会填上响应的结果</p> <a id="sendBtn" href="javascript:void(0)">点击,发送跨域请求</a> <iframe id="serverIf"></iframe> <script type="text/javascript"> document.getElementById("sendBtn").onclick = function() { var url = "http://b.com/response.html"; var fn = "GetPerson";//这是定义在response.html的方法 var reqdata = '{"id" : 24}';//这是请求的参数 var callback = "CallBack";//这是请求全过程完成后执行的回调函数,执行最后的动作 CrossRequest(url, fn, reqdata, callback);//发送请求 } function CrossRequest(url, fn, reqdata, callback) { var server = document.getElementById("serverIf"); server.src = url + "?fn=" + encodeURIComponent(fn) + "&data=" + encodeURIComponent(reqdata) + "&callback=" + encodeURIComponent(callback);//这里由request.html向response.html发送的请求其实就是通过iframe的src将参数与回调方法传给response.html } function CallBack(data) {//回调函数 var str = "My name is " + data.name + ". I am a " + data.sex + ". I am " + data.age + " years old."; document.getElementById("result").innerHTML = str; } </script> </body> </html>
看代码和注释相信都很容易理解,这个页面其实就是要告诉response.html:我要让你执行你定义好的方法GetPerson,并且要用我给你的参数'{"id" : 24}'。可能感到模糊的就是为什么要把CallBack函数传给response.html,这是定义在本页面上的方法,response.html也不能执行它;看接下来的代码就会知道:response.html纯粹是负责将CallBack这个方法名传递给下一位仁兄proxy.html,而proxy.html拿到了CallBack这个方法名就可以执行了,因为proxy.html和request.html是同域的。
2、接下来我们看response.html的代码:
复制代码 代码如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>该页面的路径是:http://b.com/response.html</title> </head> <body> <iframe id="proxy"></iframe> <script type="text/javascript"> function _request(reqdata, url, callback) {//通用方法,ajax请求 var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var data = xmlhttp.responseText; callback(data); } } xmlhttp.open("POST", url); xmlhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8"); xmlhttp.send(reqdata); } function _getQuery(key) {//通用方法,获取url参数 var query = location.href.split("?")[1]; var value = decodeURIComponent(query.split(key + "=")[1].split("&")[0]); return value; } function GetPerson(reqdata, callback) {//向process.php发送ajax请求 var url = "process.php"; var fn = function(data) { var proxy = document.getElementById("proxy"); proxy.src = "http://b.com/Proxy.html?data=" + encodeURIComponent(data) + "&callback=" + encodeURIComponent(callback); } _request(reqdata, url, fn); } (function() { var fn = _getQuery("fn"); var reqdata = _getQuery("data"); var callback = _getQuery("callback"); eval(fn + "('" + reqdata +"', '" + callback + "')"); })(); </script> </body> </html>
这里其实就是接收来自request.html的请求得到请求参数和方法后向服务器process.php发出真正的ajax请求,然后将从服务器返回的数据以及从request.html传过来的回调函数名传递给proxy.html。
3、接下来看一下process.php的代码,比较简单:
<?php $data = json_decode(file_get_contents("php://input")); header("Content-Type: application/json; charset=utf-8"); echo ('{"id" : ' . $data->id . ', "age" : 24, "sex" : "boy", "name" : "huangxueming"}'); ?>
这几句代码就不打算讲了,稍微有点PHP基础都能看懂,没PHP基础的应该都能看出个大概了,呵呵~~~
4、最后就是proxy.html了:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>该页面的路径是:http://a.com/proxy.html</title> </head> <body> <script type="text/javascript"> function _getUrl(key) {//通用方法,获取URL参数 var query = location.href.split("?")[1]; var value = decodeURIComponent(query.split(key + "=")[1].split("&")[0]); return value; } (function() { var callback = _getUrl("callback"); var data = _getUrl("data"); eval("window.top." + decodeURIComponent(callback) + "(" + decodeURIComponent(data) + ")"); })() </script> </body> </html>
这里也是最后一步了,proxy终于拿到了request.html透过response.html传过来的回调函数名以及从response.html直接传过来的响应数据,利用window.top执行request.html里定义的回调函数。
实际应用中,proxy.html基本上可以是一个通用的代理,无需改动,如果需要用到很多跨域方法,这些方法都可以在域a.com里面加上,而域b.com就相当于定义一些接口供a.com调用,如GetPerson,当然这并不是真正的接口,只是方便理解,打个比方;另外,当然就是要把iframe隐藏起来。OK,最后还是奉上那句老话:所拥有的技术并不是最重要的,最重要的是学习的能力。
发表评论
-
Jsonp跨域使用
2013-12-30 14:36 841Jsonp是解决跨域问题的一个办法。在jsonp:" ... -
jquery中animate对css3的用法
2013-09-16 15:37 770$('#box').animate({ textInd ... -
jquery框架实现基本原理
2013-04-26 14:40 790请看下面代码就明白了 var $ = jquery = fun ... -
最简单的拖拽效果
2013-01-28 16:46 771html5中提供了drag的效果, 通过事件可以进行拖拽元素, ... -
斜坡算法
2013-01-17 16:52 1442斜坡算法, 通过canvas画斜坡的算法, 知道这个算法后, ... -
如何创建一个Chrome应用
2013-01-08 15:48 0看附件的详细介绍 -
深入理解JavaScript的变量作用域
2012-12-20 15:39 622转载: http://www.cnblogs.com/rain ... -
Ajax访问文件获取字节流方法
2012-11-09 01:01 1566window.onload = function(){ ... -
IE的mouseover, mouseour透明颜色下的问题
2012-08-23 13:56 881在IE6,7,8,9 中,都存在一种情况, 就是如果两个Div ... -
Metro应用中Class的定义与使用
2012-08-15 11:58 818定义一个Class使用下面方法 // A simple &qu ... -
ECMAScript5的新特性
2012-08-08 18:36 644转载: http://www.cnblogs.com/ ... -
ECMAScript的getter和setter例子
2012-08-08 13:20 813在最新浏览器中调用下面方法进行测试。 var a = { ... -
解决Chrome浏览器跨域问题
2012-08-07 10:24 3077在本地快捷方式--〉右键--〉属性--〉目标--〉 C:\Us ... -
SeaJs模块化加载
2012-08-02 10:32 1085SeaJs模块化加载, 这个是国人写的一个框架, 遵循CMD模 ... -
JS- 封装、继承、多态
2012-08-01 10:08 855转载: http://www.cnblogs.com/ ... -
Node.js入门例子
2012-07-31 14:06 855Node.js是js的服务器端语言. 下载地址: http:/ ... -
KinticJs的基本用法
2012-06-11 15:42 927Kintic是html5中canvas的一个框架,效率高,包小 ... -
Prototype, Constructor的使用和理解
2012-06-05 14:00 876JavaScript中Prototype的使用和实例 < ... -
CSS3的before, after和label的for用法
2012-04-17 13:30 1828使用before和after可以用content, 结合bef ... -
JS绘图Flot应用-简单曲线图
2012-03-26 10:45 1711转载: http://www.iteye.com/topic/ ...
相关推荐
NULL 博文链接:https://hqlly.iteye.com/blog/1662337
layer弹窗:top.layer弹窗到父页面跨域,通过postMessage方法将子页面的配置对象发送到父页面中,父页面再通过子页面的配置对象打开弹窗,对象内不能存在事件。
第一时间想到的就是用iframe了,但问题来了,我和第三方web项目是有交互的,这就违反同源策略了,处理跨域问题是最让人头疼的事之一。 需求是这样的,在我的页面点击一些按钮,要实时反馈到iframe子页面,子页面再...
前端跨域解决方案,jsonp和cros...然后客户端就可以通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件。客户端在对JSON文件调用成功之后,也就获得了自己所需的数据。这就形成了JSONP的基本概念。
常用的几种跨域处理方法: 跨域的原理解析及实现方法 总结 摘要:跨域问题,无论是面试还是平时的工作中,都会遇到,本文总结处理跨域问题的几种方法以及其原理,也让自己搞懂这方面的知识,走起。 什么是跨域 在...
主页面A 怎么向 iframe B 传递数据呢?iframe B 怎么向 主页面A 传递数据,下面有不错的实现思路,感兴趣的朋友可以了解下
内部使用进行跨域通信,当需要调整页面高度或者关闭浮层时,向父页面发送消息,父页面中的Dialog组件接受到消息后进行处理。 Install $ spm install arale-dialog-iframe-helper --save API .close() 从iframe内部...
前两天碰到一个跨域问题的处理,使用jsonp可以解决。 最近再整理了一下: 1.jsonp。 ajax请求,dataType为jsonp。这种形式需要请求在服务端调整为返回callback([json-object])的形式。如果服务端返回的是普通json...
Iframe自适应高度一直都备受关注,接下来为大家介绍下同域名下Iframe自适应高度的处理以及跨域时Iframe高度自适应,感兴趣的朋友可以参考下哈
vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径,也可使用服务器根路径http:localhost:8088/… <iframe src=”../../static/plusPro.html” width=”1200″ height=”300″ frameborder=”...
功能集跨域如果iFrame不共享相同的原始URL,或者标头未设置为允许跨域通信,则默认情况下无法进行事件处理。 因此,该库使用postMessage API启用通信,并保留了与常规事件处理相同的功能。方法链如果愿意,可以按照...
我们在做web测试时,经常会使用WebBrowser来进行一些自动化的任务而有些网页上面会用IFrame去嵌套别的页面,这些页面可能不是在相同域名下的,这时就会出现跨域问题,无法直接在WebBrowser中获取到IFrame中的元素,接...
有别于JS跨域、IFRAME跨域等的常用处理办法,还可以利用P3P来实现跨域。P3P是什么P3P(Platform for Privacy Preferences)是W3C公布的一项隐私保护推荐标准,以为用户提供隐私保护。 P3P标准的构想是:Web 站点的...
遇到了HTTP、HTTPS协议下session共享... 实现原理:把session id设置到本地的cookie。 如下: 复制代码 代码如下: $currentSessionID = session_id(); session_id($currentSessionID ); ...$_SESSION[‘testvariable’] =
在使用try catch处理iframe跨域产生的异常时,chrome和safari浏览器似乎不能正常运作:他们直接抛出了错误而没有抛出可供JS截获的异常。
6、客户端在对JSON文件调用成功之后,也就获得了自己所需的数据,剩下的就是按照自己需求进行处理和展现了,这种获取远程数据的方式看起来非常像AJAX,但其实并不一样。 7、为了便于客户端使用数据,逐渐形成了...
jsonp是利用script标签没有跨域限制的特性,通过在src的url的参数上附加回调函数名字,然后服务器接收回调函数名字并返回一个包含数据的回调函数 function doSomething(data) { // 对data处理 } var script = ...
封装 JavaWeb 常见功能:文件上传、角色授权、Redis控制台、API日志统计、跨域处理 等等。内置代码生成器,一键生成:普通input、多行文本域、富文本编辑器、日期控件、图片上传、音频上传、视频上传、 多图上传、树...