JavaScript跨域访问

最新推荐文章于 2021-06-04 07:27:45 发布

ruiy

最新推荐文章于 2021-06-04 07:27:45 发布

阅读量401

点赞数

分类专栏： JavaScript 文章标签：跨域 jsonp window.name iframe

本文链接：https://blog.csdn.net/b2997215859/article/details/51007541

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、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:*

这段内容参考http://blog.csdn.net/linlzk/article/details/48028267

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

在服务器端设置header，如

三、postMessage

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

四、window.name

参考http://www.cnblogs.com/2050/p/3191744.html

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

看到一篇博客总结的蛮到位的，http://blog.csdn.net/kongjiea/article/details/44201021

ruiy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript跨域访问

一、Jsonp现在有一个一段代码那么，后台通过GET拿到参数callback，然后返回Js的代码，后台返回的内容会被当作Js解析<?php $callback = $_GET['callback'];/*$data = { "name":"ruiy", "age":20};*///php里的对象不是这么写的$data = array("name"=>"ruiy"
复制链接

扫一扫

专栏目录