之前只知道iframe一种跨域方式,其实还有一种更灵活的

第一种document.domain(听说有安全风险)

子域不同(如:a.xx.com向b.xx.com请求数据),需要在b.xx.com页面设置document.domain='xx.com'。

a.xx.com/a.html

<!DOCTYPE html>
<html>
<head>
<title>POCO相机</title>
</head>

<body>

<form method="post" action="http://b.xx.com/b.php" target="file_upload" enctype="multipart/form-data">
    <input type="file" />
    <button>上传</button>
</form>

<iframe name="file_upload" style="display:none"></iframe>

<script>
//绑定回调函数
$('iframe').eq(0).load(function() {
    //window.frames['file_upload'].response是返回的参数
    complete(window.frames['file_upload'].response);
});

//......其他代码

</script>
</body>
</html>

b.xx.com/b.php

//......处理上传的数据
$response = //需要返回的数据

echo "<script>";
echo "document.domain = 'xx.com'";
echo "window.response = $response";
echo "</script>";

第二种,需要同域中转页面

  1. 共有三个页面A(a.xx.xom/a.html);B(b.xx.xom/b.php);T(a.xx.xom/t.php)。
  2. A提交表单到B,并传递参数t_url='T的地址'和cb='回调函数名'。
  3. B处理完A提交的数据后,跳转到T,并将处理结果作为参数传给T,包括'回调函数名'
  4. T执行从A一直穿过来的回调函数名,并在函数参入B传过来的参数。

下面是3个页面的简略代码:

a.xx.com/index.html

<!DOCTYPE html>
<html>
<head>
<title>POCO相机</title>
</head>

<body>

<form method="post" action="http://b.xx.com/upload.php" target="file_upload" enctype="multipart/form-data">
    <input type="file" />
    <button>上传</button>
</form>

<iframe name="file_upload" style="display:none"></iframe>

<script>
//回调函数
function callback(response) {
    //......
}

//......其他代码
</script>
</body>
</html>

b.xx.com/b.php

//......处理上传的数据

$url = $t_url . '?' . 'cb=' . $cb . '&' . $params//跳转的地址和参数
//跳转到a.xx.com/t.php
echo "<script>location.href = $url;<script>";

a.xx.com/t.php

//......处理传过来的参数
$cb = //回调函数名
$response = //格式化的参数

echo "<script>";
echo "$cb($response)";//在这里执行a.html页面的回调函数(同域)
echo "</script>";

daifee
79 声望3 粉丝

引用和评论

0 条评论