浏览器跨域访问解决方案

跨域的概念

跨域大家都知道,不同地址,不同端口,不同级别,不同协议都会构成跨域。例如:about.haorooms.com和www.haorooms.com都会构成跨域。总结起来只要协议、域名、端口有任何一个不同,都被当作是不同的域。下面举例,每两个一组。

URL                      说明       是否允许通信
http://www.haorooms.com/a.js
http://www.haorooms.com/b.js     同一域名下   允许

http://www.haorooms.com/lab/a.js
http://www.haorooms.com/script/b.js 同一域名下不同文件夹 允许

http://www.haorooms.com:8000/a.js
http://www.haorooms.com/b.js     同一域名,不同端口  不允许

http://www.haorooms.com/a.js
https://www.haorooms.com/b.js 同一域名,不同协议 不允许

HTML5中window.postMessage,在两个页面之间的数据传递

关于postMessage

window.postMessage虽然说是html5的功能,但是支持IE8+,假如你的网站不需要支持IE6和IE7,那么可以使用window.postMessage。关于window.postMessage,很多朋友说他可以支持跨域,不错,window.postMessage是客户端和客户端直接的数据传递,既可以跨域传递,也可以同域传递。

应用场景

我只是简单的举一个应用场景,当然,这个功能很多地方可以使用。

假如你有一个页面,页面中拿到部分用户信息,点击进入另外一个页面,另外的页面默认是取不到用户信息的,你可以通过window.postMessage把部分用户信息传到这个页面中。(当然,你要考虑安全性等方面。)

js控制公共模板中,不同页面中的导航选中效果

导航页签选中效果

这个效果很常用,做起来方法也很多。我做的时候,通常用的方法是后端判断页面,然后给当前页面一个选中的class。因为后台来做不会有页面加载的延迟,点击之后就有效果,用户体验起来相对较好。今天介绍一下用js做的方法。

js做法

用js的做法也很多。比较推荐的方法是判断当前的url,然后根据url在nav中的位置,来对nav中的某个导航增加选中样式,代码如下:

js判断是否是数组及常见类型判断

前言

本篇是基础知识普及篇,js判断数据类型等。我们都知道,php中有is_array()函数,但是js中没有,我们判断数据类型是否是数组的时候,通常保险起见,可以写个函数进行判断。今天呢,普及一些基本的数据类型判断方法,希望对大家有所帮助。

typeof篇

typeof用的比较多的时候,是判断某个全局变量在不在,假如某个页面定义了一个全局变量。假如你做如下判断:

//haorooms是全局变量
if(haorooms!=undefined){
}//js会报错,说"Uncaught ReferenceError: haorooms is not defined"

解决的方法是我们如下写:

 if(typeof haorooms!=undefined){
 }

html5重力感应事件之DeviceMotionEvent

前言

今天主要介绍一下html5重力感应事件之DeviceMotionEvent,之前我的一篇文章http://www.haorooms.com/post/jquery_jGestures, 介绍了第三方封装的事件,里面的“orientationchange”可以获取设备方向的改变。今天主要介绍一下html5自带的事件,不过,这个事件是新的事件,关于文档请看:http://w3c.github.io/deviceorientation/spec-source-orientation.html

事件介绍

1、deviceorientation 提供设备的物理方向信息,表示为一系列本地坐标系的旋角。

2、devicemotion 提供设备的加速信息,表示为定义在设备上的坐标系中的卡尔迪坐标。其还提供了设备在坐标系中的自转速率。若可行的话,事件应该提供设备重心处的加速信息。

3、compassneedscalibration 用于通知Web站点使用罗盘信息校准上述事件。