首页 > 代码库 > 跨文档消息
跨文档消息
跨文档消息传送
1.想从其他窗口接收到消息必须对窗口对象的message事件进行监听
window.addEventListener("message",function(){},false);
使用window对象的otherwindow.postMessage(message,targetOrigin);//第一个参数为字符串文本或通过JSON.stringify(obj)转换的json字符串 第二个为接受方的url
Otherwindow 获取 1.由 window.open()获取 2.通过对 window.frames数组指定序号
// (1) 监听message事件
window.addEventListener("message", function(ev) {
// (2) 忽略指定URL地址之外的页面传过来的消息
if (ev.origin != "http://www.blue-butterfly.net") {
return;
}
// (3) 显示消息
alert("从"+ev.origin + "那里传过来的消息:\n\"" + ev.data + "\"");
}, false);
function hello()
{
var iframe = window.frames[0];
// (4) 传递消息
iframe.postMessage("你好", "http://www.blue-butterfly.net/test/");
}
--------
// (5) 向主页面发送消息
ev.source.postMessage("你好。这里是" + this.location, ev.origin);
Web Sockets通信
- Web sockets 是html5 提供的在web应用程序中客户端与服务器间进行的非HTTP得通信机制。实现了用HTTP不容易实现的服务器端的数据推送等智能通信技术
- 建立非HTTP的双向连接，实时永久的除非被关闭，只要客户端打开一个socket并与服务器建立联系服务器就可以把数据推送到客户端不需轮询客户端的请求
调用websocket对象的构造器来建立与服务器之间的通信连接。如：
Var webSocket = new webSocket("ws://localhost:8005/sokect"); (ws不加密通信 wss加密通信)
建立连接之后，就可以双向通信了。使用websocket对象的send方法对服务器发送数据，只能发送文本数据，但可以
使用JSON对象把任何js对象转换成文本数据后进行发送。
webSocket.send("data");
通过获取onmessage事件来接收服务端传来的数据
webSocket.onmessage = function(ev){
var data = http://www.mamicode.com/event.data;
….
}
通过获取onopen事件来监听socket的打开事件。
webSocket.onopen = function(event){
//开始通信时的处理
};
通过获取onclose事件来监听socket的关闭事件
webSocket.onclose = function(event){
//通信结束时的处理
};
通过close方法来关闭socket，切断通信连接。
webSocket.close();
可以通过读取readyState的属性值来获取readystate对象的状态。
CONNECTING ---0 表示正在连接
OPEN--1 表示已建立连接
CLOSING--2 表示正在关闭连接
CLOSED--3 表示已关闭连接
webSocket
<script type="text/javascript">
// 创建执行运算的线程
var worker = new Worker("SumCalculate.js");
//接收从线程中传出的计算结果
worker.onmessage = function(event)
{
//消息文本放置在data属性中,可以是任何JavaScript对象.
alert("合计值为" + event.data + "。");
};
function calculate()
{
var num = parseInt(document.getElementById("num").value, 10);
//将数值传给线程
worker.postMessage(num);
}
</script>
SumCalculate.js--------------------------------------------------------------------------------------
onmessage = function(event)
{
var num = event.data;
var result = 0;
for (var i = 0; i <= num; i++)
result += i;
//向线程创建源送回消息
postMessage(result);
}
创建后台线程的步骤很简单。只要在Worker类的构造器中将需要在后台线程中执行的脚本文件的URL作为参数，然后创建Worker对象就可以了，例如：
示例中使用的线程脚本代码如下：
self.addEventListener("message", function(event) {var data = http://www.mamicode.com/JSON.parse(event.data);var returnArray = new Array();var temp;for(var index = 0; index < data.length; index++) {if((temp = data[index]) % 3 == 0) {returnArray.push(temp);}}self.postMessage(JSON.stringify(returnArray)); self.close(); // 关闭子线程。}, false);
注意：在子线程中向发送源发送回消息后，如果该子线程不再使用，则可以使用self.close()方法关闭该子线程。
多层嵌套
要实现子线程与子线程之间的数据交互，其基本步骤如下：
先创建发送数据的子线程。执行子线程中的任务，然后把要传递的数据发送给主线程。在主线程接收到子线程传回来的消息时，创建接收数据的子线程，然后再把发送数据的子线程中返回的消息传递给接收数据的子线程。执行接收数据子线程中的代码。
线程中可用的变量、函数与类
self：用来表示本线程范围内的作用域。
- postMessage(msg)：向创建线程的源窗口发送消息。
- onmessage：获取接收消息的事件句柄。
- importScripts(urls)：导入其它JavaScript脚本文件。参数为该脚本文件的URL地址，可以导入多个脚本文件，导入的脚本文件必须与使用该线程文件的页面在同一个域中，并在同一个端口中。
- navigator对象：与window.navigator对象类似，具有appName、platform、userAgent、appVersion等属性。
- sessionStorage、localStorage：可以在线程中使用Web Storage。
- XMLHttpRequest：可以在线程中处理Ajax请求。
- Web Workers：可以在线程中嵌套线程。
- setTimeout()、setInterval()：可以在线程中实现定时处理。
- close()：结束本线程。
- eval()、isNaN()、escape()等：可以使用所有JavaScript核心函数。object：可以创建和使用本地对象。
- WebSockets：可以使用WebSockets API来向服务器发送和接收信息。
Geolocation API 用来获取用户的地理位置信息。
在HTML5中，window.navigator对象新增了一个geolocation属性，可以使用Geolocation API来对该属性进行访问。
使用getCurrentPosition方法获取地理信息。
void getCurrentPosition(onSuccess, one rror, options);
第一个参数是获取地理位置成功时所执行的函数。
navigation.geolocation.getCurrentPosition(function(position){
//获取成功时的处理
}
); 参数position代表一个position对象
第二个参数是获取地理位置失败的时候所执行的函数
回调函数中使用error对象作为参数。具有两个属性
Code
用户拒绝了位置服务--1
获取不到位置信息--2
获取信息超时错误--3
message属性 为一个字符串，在该字符串中包含错误信息。
第三个参数可以省略，它是一些可选属性的列表，
enableHighAccuracy--是否要求高精度的地理位置信息。
timeout--对地理位置信息的获取做一个超时限制。
maxminAge--对地理位置信息进行缓存的有效时间。
使用watchPosition方法持续获取用户的当前地理位置信息，它会定期的自动获取。
int watchCurrentPosition(onSuccess, one rror, options);
该方法返回一个数字，这个数字的使用方法与js中的setInterval方法的返回参数的使用方法类似，可以被clearWatch方法使用，停止对当前地理位置信息的监视。
使用clearWath方法可以停止对当前用户地理位置信息的监视。
Void clearWatch(watchId);
position对象
如果获取地理位置信息成功，则可以在获取成功后的回调函数中通过访问position对象的属性来得到这些地理位置信息。
latitude -- 当前地理位置的纬度。
longitude --当前地理位置的经度。
altitude --当前地理位置的海拔高度。
acccuracy --获取到的纬度或者经度的精度，以米为单位。
altitudeAccuracy -- 获取到的海拔高度的精度，以米为单位。
headding --设备的前进方向。用面朝正北方向的顺时针旋转角度来表示。
speed -- 设备的前进速度，以米/秒为单位
timestamp --获取地理位置信息时的时间。
跨文档消息