在漫长的前端开发旅途上，无可避免的会接触到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跨域处理方法-Javascript的更多相关文章

  1. javascript跨域、iframe跨域访问

    1.window 对象 浏览器会在其打开一个 HTML 文档时创建一个对应的 window 对象.但是,如果一个文档定义了一个或多个框架(即,包含一个或多个 frame 或 iframe 标签),浏览 ...

  2. 子页面iframe跨域执行父页面定义的JS方法

    问题需求:父页面与子页面iframe跨域嵌套,子页面要触发父页面所定义的js方法.父子页面的数据传递. 下文中会用到一些文件:父页面: parent.html嵌在父页面的子iframe页面:child ...

  3. JavaScript跨域解决方法大全

    跨域的定义:JavaScript出于安全性考虑,同源策略机制对跨域访问做了限制.域仅仅是通过“URL的首部”字符串进行识别,“URL的首部”指window.location.protocol +win ...

  4. JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  5. 跨域cors方法（jsonp，document.domain，document.name）及iframe性质

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  6. 解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度（JavaScript）

    在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.h ...

  7. 5种处理js跨域问题方法汇总（转载）

    1.JSONP跨域GET请求 ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那 ...

  8. 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  9. CP="CAO PSA OUR" 用P3P header解决iframe跨域访问cookie

    1.IE浏览器iframe跨域丢失Session问题 在开发中,我们经常会遇到使用Frame来工作,而且有时是为了跟其他网站集成,应用到多域的情况下,而Iframe是不能保存Session的因此,网上 ...

随机推荐

  1. HDU 2123 An easy problem

    http://acm.hdu.edu.cn/showproblem.php?pid=2123 Problem Description In this problem you need to make ...

  2. Apache+Nginx+php共存(一)

    在实际开发中个人的电脑中经常需要安装 WNMRP.WAMRP.LNMRP.LAMRP等各种开发环境来应对不同的开发需求. 此篇主要是对WINDOWS系统下 Apache+Nginx + PHP +My ...

  3. [Linux] 关于 history 命令的简单使用

    1. 如果不想记录当前 会话操作的命令的话 可以使用命令 set +o history 但是这个命令有一个坏处, 他自己被记住了... 2. 还有一个办法 就是 在退出登录之前执行命令 history ...

  4. php连接池 php–cp

    原文地址:http://blog.sina.com.cn/s/blog_9eaa0f400102v9fd.html 数据库连接池php-cp介绍时间 2015-01-23 11:53:05 数据库连接 ...

  5. mysql中LIKE和REGEXP

    mysql中LIKE和REGEXP都可以用来字符匹配 正则表达式REGEXP是为复杂搜索指定模式的强大方式. like用法   LIKE一般与通配符(%)和(_)两个使用 如例 SELECT prod ...

  6. 【About Me】 — 有关于我的 —

    HNSDFZ信息组一直非常蒻的一只蒟蒻,正在朝着大佬与正解的方向不懈努力中. 目前还是一只高一的萌新,下个学期进高二就可以升级当学姐啦……٩(๑>◡<๑)۶  呜呜呜已经高二啦!现在高二了 ...

  7. [CF1110H]Modest Substrings

    description CodeForces 定义一个正整数\(x\)是合适的当且仅当\(l\le x\le r\),其中\(l,r\le 10^{800}\). 找到一个长度为\(n\)的数字串,使 ...

  8. BZOJ1113 [Poi2008]海报PLA 【分治 + 线段树】

    题目链接 BZOJ1113 题解 显然只与高有关,每次选择所有海报中最低的覆盖所有海报,然后分治两边 每个位置会被调用一次,复杂度\(O(nlogn)\) \(upd:\)智障了,,是一道\(O(n) ...

  9. typescript数据类型

    // 布尔类型 let isDone: boolean = false; // 数字类型 所有数字都是浮点数 number let decLiteral: number = 6; let hexLit ...

  10. 解题：POI 2009 Fire Extinguishers

    题面 洛谷数据非常水,建议去bzoj 我第一眼一看这不是那个POI2011的升级版吗(明明这个是2009年的,应该说那个是这个的弱化版,果然思想差不多. 因为$k$很小,可以考虑每个间隔距离来转移.我 ...