本节书摘来自异步社区《JavaScript设计模式》一书中的第11章，第11.5节，作者：张容铭著，更多章节内容可以访问云栖社区“异步社区”公众号查看
11.5 代理模板
“当然，这种方式还要求其他域要有一定可靠性。否则将会攻击到你的网站。当然这种方式也被人称之为JSONP方案，有时我们还会通过一个方法来动态生成需要的JSONP中的< script >标签”。小铭接着说，“与之类似的还有另外一种方案是被称之为代理模板的方案，他的解决思路是这样的，既然不同域之间相互调用对方的页面是有限制的，那么自己域中的两个页面相互之间的调用是可以的，即代理页面B调用被代理的页面A中对象的方式是可以的。那么要实现这种方式我们只需要在被访问的域中，请求返回的Header重定向到代理页面，并在代理页面中处理被代理的页面A就可以了。”
“既然这样，是不是我们在自己的域中要有这样A、B两个页面了？”小白问。
“是的。比如我们将自己的域称为X域，另外的域称为Y域，X域中要有一个被代理页面，即A页面。在A页面中应该具备三个部分，第一个部分是发送请求的模块，如form表单提交，负责向Y域发送请求，并提供额外两组数据，其一是要执行的回调函数名称，其二是X域中代理模板所在的路径，并将target目标指向内嵌框架。第二个部分是一个内嵌框架，如iframe，负责提供第一个部分中form表单的响应目标target的指向，并将嵌入X域中的代理页面作为子页面，即B页面。第三个部分是一个回调函数，负责处理返回的数据。”
X域中被代理页面A
<script type="text/JavaScript">
function callback(data){
console.log('成功接收数据', data);
}
</script>
<iframe name="proxyIframe" id="proxyIframe" src="">
</iframe>
<form action="http://localhost/test/proxy.php" method="post" target= "proxyIframe">
<input type="text" name="callback" value="callback">
<input type="text" name="proxy" value="http://localhost:8080/proxy.html">
<input type="submit" value="提交">
</form>
“其次在X域中我们也要有一个代理页面，主要负责将自己页面URL中searcher部分的数据解析出来。将数据重新组装好，调用A页面里的回调函数，将组装好的数据作为参数传入父页面中定义的回调函数中并执行。”
X域中代理页面B
<script type="text/JavaScript">
//页面加载后执行
window.onload = function(){
//如果不在A页面中返回，不执行
if(top == self) return;
//获取并解析searcher中的数据
var arr = location.search.substr(1).split('&'),
//预定义函数名称以及参数集
fn, args;
for(var i = 0, len = arr.length, item; i < len; i++){
//解析searcher中的每组数据
item = arr[i].split('=');
//判断是否为回调函数
if(item[0] == 'callback'){
//设置回调函数
fn = item[1];
//判断是否是参数集
}else if(item[0] == 'arg'){
//设置参数集
args = item[1];
}
}
try{
//执行A页面中预设的回调函数
eval('top.' + fn + '("' + args + '")');
}catch(e){}
}
</script>
“最后是Y域中的被请求的接口文件C，它的主要工作是将从X域过来的请求的数据解析并获取回调函数字段与代理模板路径字段数据，并打包返回，并将自己的Header重定向为X域的代理模板B所在路径。”
<?php
$proxy = $_POST["proxy"];
$callback = $_POST["callback"];
header("Location: ".$proxy."?callback=".$callback."&arg=success");
?>
测试结果
/*
控制台输出依次是
成功接收数据success
*/
