`
rayln
  • 浏览: 434038 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

通过Iframe进行跨域处理

 
阅读更多
在漫长的前端开发旅途上,无可避免的会接触到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也放到了页面上:
复制代码 代码如下:

<!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,最后还是奉上那句老话:所拥有的技术并不是最重要的,最重要的是学习的能力。
分享到:
评论

相关推荐

    iframe 跨域解决方法

    例如,`util.js`可能包含了`CORS`或`PostMessage`相关的辅助函数,而`xd.js`可能用于`iframe`内部处理跨域消息。 为了实际应用这些方法,我们需要检查`xd.js`中的代码,看看它是如何处理`iframe`的跨域通信的。例如...

    iframe 跨域访问session

    6. **服务器端代理**:最安全且可靠的方法是不在客户端处理跨域`session`,而是通过服务器端的代理。例如,服务器可以接收来自`iframe`的请求,然后转发到实际的目标,并在响应中包含`session`信息。 在提供的文件...

    完美解决iframe跨域问题

    3. **iframe跨域问题**:当iframe加载的页面与包含它的页面不在同一个域时,就会出现跨域问题,导致无法直接通过JavaScript进行通信,如获取iframe内的内容、设置iframe的属性等。 **二、iframe跨域的解决方案** 1...

    iframe跨域常用问题和iframe页面自适应

    在处理`iframe`跨域时,主要涉及以下两种方法: 1. **CORS(Cross-Origin Resource Sharing)**:这是一种现代浏览器支持的跨域资源共享机制,服务器端需要在响应头中添加`Access-Control-Allow-Origin`字段,允许...

    解决JS跨域访问IFrame的解决方案

    在JSP中,可能通过HttpClient向IFrame加载的源发送请求,获取数据,然后在服务器端处理后返回给JSP页面,间接实现跨域通信。 综上所述,解决JS跨域访问IFrame的问题,需要根据实际需求和环境选择合适的解决方案,...

    iframe 跨域 自动适应高度

    1. **同源策略与iframe跨域** 同源策略是浏览器安全的一项基础机制,它限制了来自不同源的"文档"或脚本相互交互。当一个`iframe`加载的页面与包含它的页面不在同一个源下时,就会遇到跨域问题。为了解决这个问题,...

    iframe跨域访问示例

    在Web开发中,"iframe跨域访问"是一个重要的概念,涉及到浏览器的安全策略和网页的嵌入技术。本文将深入探讨这个主题,以便更好地理解和应用。 首先,我们需要了解什么是iframe。Iframe,全称Inline Frame,是HTML...

    iframe跨域通信解决方法

    ### iframe跨域通信解决方法 在现代Web开发中,跨域问题经常出现并困扰着开发者。尤其是在使用`iframe`嵌入不同源的内容时,主页面往往无法直接与`iframe`内的内容进行交互,这就需要一种解决方案来实现跨文档消息...

    iframe 跨域

    如果`iframe`中的页面与父页面源不一致,就会受到同源策略的限制,无法通过JavaScript进行通信。 2. `iframe`的src属性:`iframe`的`src`属性用于指定要加载的URL。当这个URL与当前页面的源不同时,就会触发跨域。 ...

    iframe跨域嵌套自适应高度

    ### iframe跨域嵌套自适应高度 在网页开发过程中,`iframe`作为一种常见的网页元素,被广泛用于在当前页面中嵌入另一个独立的文档或页面。然而,在实际应用中经常会遇到一些问题,如跨域限制、自适应高度调整以及...

    iframe跨域通信的通用解决方案-第二弹!(终极解决方案)

    标题中的“iframe跨域通信的通用解决方案-第二弹!(终极解决方案)”指的是在Web开发中,使用`iframe`元素进行跨域通信的一种高级技术。跨域通信是Web应用程序中常见的需求,特别是在需要集成不同来源的网页内容或者...

    跨域控制iframe高度

    我们可以在父页面中监听`message`事件,然后在iframe页面中通过`window.parent.postMessage`发送消息,其中消息内容可以包含iframe的高度信息。例如: 父页面: ```javascript window.addEventListener('message...

    iframe跨域自适应高度模板

    然而,当`iframe`中的内容来源于不同的源(即跨域)时,会受到浏览器同源策略的限制,这时就需要特殊的处理来解决跨域问题。同时,`iframe`内容的动态加载可能使得其高度不固定,如果不能自适应高度,可能会导致页面...

    postmessage解决iframe页面跨域

    跨域限制是浏览器为了安全而实施的一种策略,它禁止不同源的页面之间进行交互,防止恶意网站通过脚本访问敏感数据。然而,在某些场景下,如社交媒体插件、广告或者内容嵌入,我们需要打破这个限制,这就需要用到`...

    iframe跨域高度自适应例子源码

    标题"iframe跨域高度自适应例子源码"指的是一个实例,展示了如何在跨域的情况下使`iframe`内容自动调整高度以适应其内部内容。这个例子提供了一个在线演示(http://okiner.cn/demo/cross-domain/iframe.html)以及源...

    layer弹窗:top.layer弹窗到父页面跨域解决办法

    标题和描述所提及的是一个关于如何解决layer弹窗在跨域环境下的问题,主要涉及到iframe、跨域以及layer的使用技巧。下面我们将详细探讨这个问题及其解决方案。 首先,我们了解下**iframe**。iframe(Inline Frame)...

    单点登录跨域iframe互相通信方案.zip

    4. **Cookie管理**:在跨域场景下,可以通过设置`document.domain`属性使子域共享主域的Cookie,从而实现身份信息的传递。在SSO中,Cookie常用来存储会话标识或认证信息。 5. **安全考虑**:在实现跨域iframe通信时...

    php main 与 iframe 相互通讯类 同域 跨域)

    `execA.php`和`execB.php`可能是用于执行特定任务的PHP脚本,例如接收从iframe发送的数据并进行处理,或者向iframe发送响应数据。这些脚本可能会使用`FrameMessage`类来实现通信。 `A.html`和`B.html`是HTML页面,...

    iframe跨域互相调用资源

    本示例“iframe跨域互相调用资源”提供了一个解决方案,它着重展示了如何通过`iframe`实现在不同源之间进行通信,并且处理了浏览器兼容性问题,特别是对较老版本的IE浏览器(至少支持到IE8)的支持。 首先,`iframe...

Global site tag (gtag.js) - Google Analytics