简单研究跨域的几种方法
来源:互联网 发布:linux 覆盖式复制 编辑:程序博客网 时间:2024/06/06 03:46
一、window.postMessage()。
MDN上有详细的实例代码。以下是一个简单实例。
发送方代码
var con = document.getElementsByTagName('iframe')[0].contentWindow;con.postMessage('hello','http://192.168.110.2');
接收方代码
window.addEventListener('message',receive,false);function receive(event){var origin = event.origin || event.originalEvent.origin;if (origin !== "http://192.168.110.2")return;alert(event.data);//简单处理}
上述代码中,关键部分是发送方需要获取到接收方窗口的引用,这意味着接收方窗口必须在你的浏览器上打开着,而且是加载完毕的,发送方包含一个data(数据)和origin(接收方的协议加ip,端口号与协议默认端口不符的话就需要加上它)。接收方window为message操作类型绑定一个函数,安全性就体现在这个函数里了,先判断是不是正确的发送方,再处理消息。
实际写demo的时候注意到了以下两点:1、接受消息的页面如果没有加载完,那么就不会有反馈,所以用window.open需要待其加载完毕再发送消息。2、发送对象类型是window,如果是iframe标签,则对象为document.getElementsByTagName("iframe")[0].contentWindow,或者window.frames[0]。
二、jsonp
加载js代码的标签script有src属性,和其他标签的src一样,它也是可以跨域的。jsonp跟一个普通ajax的get请求效果差不多,只是写法不太一样,但是却可以跨域,这就体现与ajax的不同了。几种方法中,似乎就这种应用最普遍了。
这里的原理也比较简单,新建一个script脚本,src为一个普通get请求,请求的内容就是一个函数和数据(类似这种形式,hello(data);),这里的hello需要作为参数传递过去,而且hello函数声明已经事先写好了。部分代码如下:
<body><p>原始页面内容</p><button onclick="helloworld()"> hello</button></body><script type="text/javascript">function helloworld(){var script = document.createElement('script');var url0 = 'http://192.168.193.88/scdbackup/test0.php?callback=hello';script.setAttribute('src', url0);document.body.appendChild(script);}function hello(data){document.getElementsByTagName('p')[0].innerHTML = data.message;}</script>
上述代码中,test0.php中定义的返回数据类型为json,类似于这种形式{message:'hello'}。所以点击按钮后,标签p的内容会被替换为hello。
三、CORS
cross origin resources sharing---跨域资源共享,即设置Access-Control-Allow-Origin。Ubuntu下的apache2找不到配置headers_module的地方,真是醉人的配置文件。一般情况下,这玩意是默认开启的,只需要找到<Directory />,加上Header set Access-Control-Allow-Origin *就能让任何其他域都能访问到,如果想要限定某个ip,只需把*替换为某个ip就好。php中,只要在需要被其他域访问到的php文件开头中加上header("Access-Control-Allow-Origin:*"); 即可。服务器和php随便配置一项即可使用CORS,而使用CORS的方法则与ajax一毛一样,需要注意的是url要带上协议。
四、window.name
这是个古老的方法。主要流程就是设置一个iframe,src设为跨域请求数据地址,onload的时候获取window.name,再将src改成本域下某个文件,导致再次onload,此时获取name值处理即可。处理完了之后,可以删除这个iframe,防止被其他页面读取。简单代码如下:
<body>
<p>原始页面内容</p>
<button onclick="helloworld()"> hello</button>
</body>
<script type="text/javascript">
function helloworld(){
var ifr = document.createElement('iframe');
ifr.style.display = 'none';
ifr.src = 'http://192.168.193.88/test1.php';
ifr.onload = function(){
ifr.onload = function(){
document.getElementsByTagName('p')[0].innerHTML = ifr.contentWindow.name;
document.body.removeChild(ifr);
}
ifr.src = 'http://192.168.193.1/test.php';
}
document.body.appendChild(ifr);
}
</script>
另外还有一种方法是document.domain+iframe的设置,不过这是主要针对主域相同而子域不同的跨域请求,使用范围不是很广就不提了。
0 0
- 简单研究跨域的几种方法
- 【VBA研究】解析JSON数据的几种方法
- 倒序输出的几种简单方法
- 隐藏文件夹的几种简单方法
- 简单的几种排序方法
- AD滤波的几种简单方法
- 几种简单的图像加密方法
- 文件隐藏的几种简单方法
- 字符串反转的几种简单方法
- 实现滑动的几种简单方法
- AlertDialog的几种简单表现方法
- 跨域的几种方法
- 跨域的几种方法
- ios的几种简单有效的数组排序方法
- 几种简单的判断素数的方法
- 新站的几种简单的推广方法
- 几种简单的判断素数的方法
- 常用的几种简单的内部排序方法
- mac 安装Xshell4
- Android Studio 默认keystore 以及自定义keystore
- JDK支持的JAXB版本
- 计算机硬件组成
- ArrayBlockingQueue和LinkedBlockingQueue的使用
- 简单研究跨域的几种方法
- kettle运行时报错 could not create java virtual machine
- oracle拼接字段和group by的使用
- 《JAVA异常处理》ArrayIndexOutOfBoundsException异常与OutOfMemoryError错误
- Struts2中集合在jsp中循环显示
- TCP/IP、Http、Socket的区别
- 第4章:分治策略 ——最大字数组问题
- 数据仓库介绍
- LeetCode-35.Search Insert Position