简易html页面调用api（如何使用 HTML5 的 Notification API）

本文目录

• 如何使用 HTML5 的 Notification API
• 有人可以说一下如何在网页上面调用一个API吗
• html5+ 的api怎么用

如何使用 HTML5 的 Notification API

使用 HTML5 的 Notification API的方法：
1、申请权限
出于安全考虑，要发送桌面消息，需要先申请用户授权。Notification对象提供了一个静态的方法——requestPermission()，它接收一个回调函数作为参数，并把返回值传递给回调函数作为参数：
Notification.requestPermission(function(status){
if(Notification.permission !== status){
Notification.permission = status;
}
});

返回值为字符串，有以下三个值：
default
granted
denied
默认为default，也就是需要询问，表现和denied一样。
2、创建消息
用户授权以后，就可以通过下面方式创建一条桌面提醒了：
var n = new Notification(title, options);

options为字典，传入Notification对象的属性。
3、包含属性
Notification对象有如下几个只读属性：
dir(文字方向，经测试都不支持)
lang(语言)
body(消息体)
tag(标签)
icon(icon地址)
这几个属性都可以在创建消息的时候，作为option传入Notification构造函数。提一下tag属性，在有很多消息的时候，这个属性就非常有用，它会用拥有相同tag的最新的消息取代之前的消息，只显示一条最新的消息。比如在一个聊天室系统中，同时和几个人在聊天的时候，就可以以人名为tag显示不同人的最新消息。
4、定义事件
Notification对象有四个事件，分别是
onshow()
onclick()
onclose()
onerror()
分别在消息显示、被点击、被关闭和出错的时候被触发。通常情况下，只需要处理点击事件就够了，比如点击消息后跳转到某一特定的页面。
这四个事件的使用可以网上搜索

有人可以说一下如何在网页上面调用一个API吗

通常的做法是调用Win32API或直接调用nbtstat命令，这样做有很多问题，另一种方法就是直接用客户端脚本，我们这里用JavaScript，这样做的好处是不需要服务器端进行处理，有客户端自行获取，传递到服务器端，且速度和可靠性都比在服务器端获取好。
具体实现的html和JavaScript如下：

关键是用到两个ActiveX：
《OBJECT id=locator classid=CLSID:76A64158-CB41-11D1-8B02-00600806D9B6 VIEWASTEXT》《/OBJECT》
《OBJECT id=foo classid=CLSID:75718C9A-F029-11d1-A1AC-00C04FB6C223》《/OBJECT》
不过这两个ActiveX都是系统自带，不用去下载或注册。

接下来的工作就是用脚本和ActiveX交互，脚本可以是js或Vbs。
《HTML》《HEAD》《TITLE》WMI Scripting HTML《/TITLE》
《META http-equiv=Content-Type content=“text/html; charset=gb2312“》
《SCRIPT language=JScript event=“OnCompleted(hResult,pErrorObject, pAsyncContext)“ for=foo》
document.forms.txtMACAddr.value=unescape(MACAddr);
document.forms.txtIPAddr.value=unescape(IPAddr);
document.forms.txtDNSName.value=unescape(sDNSName);
//document.formbar.submit();
《/SCRIPT》

《SCRIPT language=JScript event=OnObjectReady(objObject,objAsyncContext) for=foo》
if(objObject.IPEnabled != null && objObject.IPEnabled != “undefined“ && objObject.IPEnabled == true)
{
if(objObject.MACAddress != null && objObject.MACAddress != “undefined“)
MACAddr = objObject.MACAddress;
if(objObject.IPEnabled && objObject.IPAddress(0) != null && objObject.IPAddress(0) != “undefined“)
IPAddr = objObject.IPAddress(0);
if(objObject.DNSHostName != null && objObject.DNSHostName != “undefined“)
sDNSName = objObject.DNSHostName;
}
《/SCRIPT》

《META content=“MSHTML 6.00.2800.1106“ name=GENERATOR》《/HEAD》
《BODY》
《OBJECT id=locator classid=CLSID:76A64158-CB41-11D1-8B02-00600806D9B6 VIEWASTEXT》《/OBJECT》
《OBJECT id=foo classid=CLSID:75718C9A-F029-11d1-A1AC-00C04FB6C223》《/OBJECT》
《SCRIPT language=JScript》
var service = locator.ConnectServer();
var MACAddr ;
var IPAddr ;
var DomainAddr;
var sDNSName;
service.Security_.ImpersonationLevel=3;
service.InstancesOfAsync(foo, ’Win32_NetworkAdapterConfiguration’);
《/SCRIPT》

《FORM id=formfoo name=formbar action=NICPost.asp method=post》《INPUT value=00:05:5D:0E:C7:FA name=txtMACAddr》《INPUT value=192.168.0.2 name=txtIPAddr》
《INPUT value=typ name=txtDNSName》
《/FORM》

《/BODY》
《/HTML》

html5+ 的api怎么用

1.1 理解源安全
HTML5荣光引入源（origin）的概念对域安全进行了阐明和改进。源是在网络上用来建立信任关系的地址的子集。源由规则（scheme）、主机（host）、端口（post）组成。
源的概念中不考虑路径。
HTML5定义了源的序列化。源在API和协议中以字符串的形式出现。
postMessage的安全规则确保了消息不会被传递到非预期的源页面中。当发送消息时，由发送方制定接收方的源。如果发送方用来调用postMessage的窗口不具有特定的源（例如用户跳转到了其他站点），浏览器就不会传送消息。
类似地，接受消息的时候，发送方的源也被作为消息的一部分。为避免伪造，消息源由浏览器提供。接收方可以决定处理哪些消息，以及忽略哪些消息。我们可以保留一份白名单，告诉浏览器仅仅处理可信源的消息。
最好永远不要对来自第三方的字符串求值。再者，要避免使用eval方法处理应用内部字符串。可以通过window.JSON或者json,.org解析器使用JSON。
1.2 跨文档消息通信的浏览器支持情况
常用的做法是检测XMLHttpRequest对象中是否存在withCredentials属性：

JavaScript Code复制内容到剪贴板

• var xhr = new XMLHttpRequest(); if (typeof xhr.withCredentials === undefined) { //不支持跨源的XMLHttpRequest } else { //支持跨源的XMLHttpRequest }  

• 1.3 使用postMessage API


• 提示 HTML5定义的MessageEvent接口也是HTML5 WebSockets和HTML5 WebWorkers的一部分。HTML5的通信功能用用于接受消息的API与MessageEvent接口是一致的。其他通信类API，如EventSource API和Web Workers，也都是使用MessageEvent接口来传递消息。


• 1.4 使用postMessage API创建应用


• 发送消息


• 　　通过调用目标页面window对象中的postMessage()函数可发送消息，代码如下：


• 　　

JavaScript Code复制内容到剪贴板

• window.postMessage(“Hello, world“, “porta“);  

• 　　第一个参数包括要发送的数据，第二个参数是消息传送的目的地。要发送消息给iframe，可以再相应iframe的contentWindow中调用postMessage，代码如下：


• 　　

JavaScript Code复制内容到剪贴板

• document.getElementsByTagName(“iframe“).contentWindow.postMessage(“Hello, world“, “cha“);  

• 监听消息事件


• 　　接收消息时仅需在页面中增加一个事件处理函数。当某个消息到达时，通过检查消息的来源来决定是否对这条消息进行处理。


• 　　

JavaScript Code复制内容到剪贴板

• window.postMessage(“Hello, world“, “porta“);  

• 　　消息事件是一个拥有data（数据）和origin（源）属性的DOM事件。data属性是发送方传递的实际消息，而origin属性是发送来源。


• 　　源由规则（scheme）、主机（host）、端口（port）组成。


• 　　例如：由于规则不同（如主要集中在两个方面：


• （1）跨源XMLHttpRequests;


• （2）进度事件（Progress events）