王晨旭的个人网站
王晨旭的博客
2018-08-07

HTML5 协议处理: Web-based Protocol Handlers

说明

获取资源,是利用Web最重要的功能之一,但随着现代也有越来越多的应用改用Web设计,而这些应用中,是有不少原本可以处理其他协议的(例如邮箱应用可以处理mailto:协议),如果通过处理其他协议,需要手动复制粘贴或者需要先手动转成http(s):协议,显然是不方便的。为了解决这个问题,HTML5引入了“Web-based Protocol Handlers”,以便于直接点击其他协议的链接就可以直接用Web应用打开并处理。

语法

Web-based Protocol Handlers 只提供了一个方法。

注册

使用registerProtocolHandler方法用来注册处理程序,此方法扩展了navigator对象,具体语法如下:

navigator.registerProtocolHandler(protocol, url, title);

当一个浏览器执行这段代码时,它应该向用户显示一个请求,让用户许可为处理这个协议而注册一个web应用程序的请求。

参数

protocol: 站点希望处理的协议,指定为字符串。例如,您可以注册处理SMS文本消息链接,通过注册来处理“短信”方案。

注意 协议必须属于白名单内的协议,或者以web+开头的协议。

协议白名单 - - - -
bitcoin geo im irc ircs
magnet mailto mms news nntp
sip sms smsto ssh tel
urn webcal wtai xmpp

url: 处理程序的URL,作为字符串。此字符串应包含“%s”作为占位符,将替换为要处理的文档的转义URL。此URL可能是真实的URL,也可能是电话号码,电子邮件地址等。

注意 url参数必须为代码执行页面的同源url, 可以使相对url, 也可以是绝对url。

title: 在界面展示给的用户的协议处理程序标题。

可能的错误

SecurityError: 用户代理阻止了协议处理程序的注册。如果指定了无效协议(例如“http”),则可能会发生这种情况,出于明显的安全原因无法注册。

SyntaxError: 指定的协议处理程序URL中缺少“%s”字符串。

激活

当协议被注册后,只要用户点击使用对应协议的链接,浏览器将跳转到对应的web应用程序注册时提供的URL。

例如点击一下链接,就会打开用于处理mailto:协议的Web应用,除非此协议未被注册,则会打开操作系统的处理应用。

<a href="mailto:webmaster@example.com">Web Master</a>

处理

当用户要打开对应协议时,浏览器会自动跳转到对应的URL,例如mailto:注册到https://www.example.com/?url=%s,则点击上面的链接就会打开https://www.example.com/?url=mailto%3Awebmaster%40example.com,然后就可以直接使用服务器或者JavaScript处理。

2018-08-07

HTML5 指针锁定API: Pointer Lock API

说明

指针锁定(以前叫做鼠标锁定) 是一种输入方法,这种方法是基于指针的相对位移(movement),而不是绝对位置,而不仅是指针的绝对位置。此API将鼠标指针锁定到特定元素上(同时将指针光标从视图中移除),并获取原始的指针位移,这样就能不受元素边界的约束而无限移动,且不会移出元素。

语法

Pointer lock API 提供两个新的方法、两个新的事件,并对对一个事件进行了扩展。

requestPointerLock 方法

requestPointerLock方法用来请求指针锁定,此方法扩展了 DOM 元素,具体语法如下:

element.requestPointerLock();

注意 requestPointerLock方法可能需要添加浏览器前缀才能使用。

exitPointerLock 方法

exitPointerLock方法用来推出指针锁定,此方法扩展了document对象,具体语法如下:

document.exitPointerLock();

注意 exitPointerLock方法可能需要添加浏览器前缀才能使用。

pointerlockchange 事件

当指针锁定状态改变时(如:调用 requestPointerLockexitPointerLock,用户按下 ESC 键),pointerlockchange 事件被分发到 document。 这是一个简单事件,不包含任何的额外数据。

注意 pointerlockchange 事件可能需要添加浏览器前缀才能使用。

pointerlockerror 事件

当调用 requestPointerLockexitPointerLock而引发错误时,pointerlockerror 事件被分发到 document。 这是一个简单事件,不包含任何的额外数据。

注意 pointerlockerror 事件可能需要添加浏览器前缀才能使用。

movement 事件的扩展

Pointer lock API 对MouseEvent事件增加了 movement 属性:

partial interface MouseEvent {
    readonly attribute long movementX;
    readonly attribute long movementY;
};

注意 movement 属性可能需要添加浏览器前缀才能使用。

其他注意事项

只有网页处于全屏状态下,指针锁定才会成功,当退出全屏后,指针锁定也会自动退出。

2018-07-18

关于

关于我

我现在是一个热爱开发、热爱编程的学生,一个自动化专业的学生。学过C/C++、JavaScript、Python等,未来想搞人工智能。

关于这个站

我想把这个网站简称技术文档和技巧类的参考网站,想自己写一写教程,对于成系列的内容,我会做成一个电子书;对于不能汇成书的,我会以博文的形式发在这个网站上。

除了这一篇博文是唯一一篇非技术类博文,其他的博文全都是与技术有关的。具体范围包括:

具体的内容,则是根据我最近在学或者在用的东西决定。

至于此网站,目前我托管到了 GitLab 上。

最后希望这个网站,以后会对你有帮助。