跨文档消息

跨文档消息传送

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 = 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 = 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, onError, options);

第一个参数是获取地理位置成功时所执行的函数。

navigation.geolocation.getCurrentPosition(function(position){

//获取成功时的处理

}

);  参数position代表一个position对象

第二个参数是获取地理位置失败的时候所执行的函数

回调函数中使用error对象作为参数。具有两个属性

Code

用户拒绝了位置服务--1

获取不到位置信息--2

获取信息超时错误--3

message属性 为一个字符串,在该字符串中包含错误信息。

第三个参数可以省略,它是一些可选属性的列表,

enableHighAccuracy--是否要求高精度的地理位置信息。

timeout--对地理位置信息的获取做一个超时限制。

maxminAge--对地理位置信息进行缓存的有效时间。

使用watchPosition方法持续获取用户的当前地理位置信息,它会定期的自动获取。

int watchCurrentPosition(onSuccess, onerror, options);

该方法返回一个数字,这个数字的使用方法与js中的setInterval方法的返回参数的使用方法类似,可以被clearWatch方法使用,停止对当前地理位置信息的监视。

使用clearWath方法可以停止对当前用户地理位置信息的监视。

Void clearWatch(watchId);

position对象

如果获取地理位置信息成功,则可以在获取成功后的回调函数中通过访问position对象的属性来得到这些地理位置信息。

latitude -- 当前地理位置的纬度。

longitude --当前地理位置的经度。

altitude  --当前地理位置的海拔高度。

acccuracy --获取到的纬度或者经度的精度,以米为单位。

altitudeAccuracy -- 获取到的海拔高度的精度,以米为单位。

headding --设备的前进方向。用面朝正北方向的顺时针旋转角度来表示。

speed -- 设备的前进速度,以米/秒为单位

timestamp --获取地理位置信息时的时间。

时间: 2024-10-22 12:49:03

跨文档消息的相关文章

跨域技术之跨文档消息传输

跨文档消息传送,简称为XDM,指的是来自不同的域的页面间的传递消息. 如果两个网页不同源,就无法拿到对方的DOM.典型的例子是iframe窗口和window.open方法打开的窗口,它们与父窗口无法通信. 比如,父窗口运行下面的命令,如果iframe窗口不是同源将会报错. document.getElementById("iframe").contentWindow.document 上面命令中,父窗口想获取子窗口的DOM,因为跨源导致报错. 反之亦然,子窗口获取主窗口的DOM也会报错

HTML5 学习笔记四(跨文档消息通信)

一.同域 父→子  方法: ⒈iframe对象:父页面的iframe中的子页面,父的iframe对象的contentWindow即为子window对象. ⒉父通过window.open()方法,其方法接收子url作为参数,方法返回值为子window对象. 子→父 方法: ⒈iframe:在父页面的iframe中,子页面的parent(window.parent)对象为父window. ⒉使用open()方法的父子,其子页面的window.openner即为父window对象. 二.跨域 在父窗口

HTML5中的跨文档消息传递

跨文档消息传送(cross-document messaging),有时候也简称为XDM,指的是来自不同域的页面间传递消息.例如,www.w3cmm.com域中的一个页面与一个位于内嵌框架中的p2p.w3cmm.com域中的页面通信.在XDM机制出现之前,更稳妥地实现这种通信需要花很多功夫.XDM把这种机制规范化,让我们能既稳妥有简单地实现跨文档通信. XDM的核心是postMessage()方法.在HTML5规范中,除了XDM部分之外的其它部分也会提到这个方法名,但都是为了同一个目的:向另一个

HTML5学习之跨文档传输消息(七)

新标准中提供了文档之间直接的消息传输API.而且不限制跨域消息传递! 发送消息使用的是Window对象的postMessage(data,targetURL)方法就可以了,但给哪个window对象发送消息,就使用哪个window的实例来调用,注意这个细节. 文档默认监听一下message事件就可以接受消息了:window.addEventListener("message", function (ev) {}); 监听消息事件:ev两个重要属性:ev.source指向发送消息的源win

[HTML5_WebWorkers]HTML5 web通信(跨文档通信/通道通信)简介

一.简单概要 web通信(洋名:web messaging)是一种文档中独立的浏览上下文间的DOM不会被恶意的跨域脚本暴露数据分享方式. 得得得,术语啊什么的,比看到凤姐还头疼.有必要把上面一句话拆开讲: web通信是一种数据分享方式(有屁话之嫌): 通信的主体是“浏览上下文”(这是纳尼?): 哦,“浏览上下文”呢是“一个将 Document对象呈现给用户的环境”,你可以近似理解为平常我们看到的某个页面所处的环境: web通信不会有DOM被恶意暴露的危险: 目前应用比较多的就是iframe之间的

跨文档消息传递 postMessage

一.跨文档消息传递 1. postMessage 发送信息 向当前页面的 <iframe> 元素传送数据 // 接收方window对象.postMessage( "message", "接收方域名" ); var iframeWindow = document.getElementById("myframe").contentWindow; //contentWindow iframeWindow.postMessage("

同域下跨文档通信iframe和window.open

1.iframe标签可以嵌套另一个标签,并且可以通过js去访问被包含的页面的window对象,从而操作该页面下documentElement,如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <s

web通信之跨文档通信 postMessage

index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>web通信之跨文档通信</title> <style> iframe {float:left;width:45%; height:200px; bor

postMessage解决跨域下跨文档通信

postMessage方法可以向另外一个窗口发送消息, 该方法是window下的一个全局方法.用法: 首先找到新窗口的window的对象,然后调用postMessage方法,该方法接受两个参数,第一个参数为数据,第二个参数为打开的新窗口的域(带协议的).例如: oMyIframe.contentWindow.postMessage('1', 'http://www.b.com'); 在被打开的新窗口里面,有一个message事件:当窗口接受到通过postMessage传递过来的数据时就会触发该事