您的位置：首页 > Web前端 > JavaScript

JavaScript跨域访问

2016-03-29 17:12 429 查看

一、Jsonp

现在有一个一段代码

<script type="text/javascript" src="./testJsonp.php?callback=getInfo"></script>

那么，后台通过GET拿到参数callback，然后返回Js的代码，后台返回的内容会被当作Js解析

<?php
$callback = $_GET['callback'];
/*$data = {
"name":"ruiy",
"age":20
};*///php里的对象不是这么写的
$data = array("name"=>"ruiy","age"=>20);
$data = json_encode($data);
echo $callback."($data)";

那么前台这里写好回调函数

function getInfo(res){
console.log(res);
alert(res.name+":"+res.age);
}

如果想动态地添加和访问，那就动态的添加scrpt代码，后台代码不变，前台代码testJsonp.html如下

Filename ：testJsonp.html

<!DOCTYPE html>
<html>
<head>
<title>testJsonp</title>
</head>
<body>
<script type="text/javascript">
// 动态的加入script片段，以跨域访问
var scriptTag = document.createElement("script");
scriptTag.setAttribute("type", "text/javascript");
scriptTag.setAttribute("src","./testJsonp.php?callback=getInfo");
document.getElementsByTagName("head")[0].appendChild(scriptTag);
function getInfo(res){
console.log(res);
alert(res.name+":"+res.age);
}
</script>
</body>
</html>

Jquery里有$.getJson()的方法，有俩个参数，第一个是url，第二个是callback函数，实际上帮助我们省掉了添加script代码等工作，即插即用，很方便

二、Access-Control-Allow-Origin:*

这段内容参考/article/2504322.html

主要内容就是，服务器允许客户端的访问

在服务器端设置header，如

三、postMessage

这是html5的东西，有时间来研究一下

四、window.name

参考/article/5062181.html

主要就是，通过iframe的src引入跨域的页面，但是原来页面有不能跨域访问iframe里的东西，所以可以在iframe的onload设置iframe的src为同一域名下，然后window的属性却没有变，然后就可以访问window.name了。这个有空来试，还没有可供测试的其他域名。

看到一篇博客总结的蛮到位的，/article/2079028.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航