Navigator.registerProtocolHandler All In One

Web API

custom protocol

URL Schemes

URL Protocols

https://caniuse.com/?search=registerProtocolHandler

不推荐使用，支持不足

https://html.spec.whatwg.org/multipage/webappapis.html#custom-handlers

registerProtocolHandler

Navigator

navigator.registerProtocolHandler(scheme, url, title);

// navigator.registerProtocolHandler(scheme, url)

https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/registerProtocolHandler

URI syntax

RFC 3986 - Uniform Resource Identifier (URI)

https://tools.ietf.org/html/rfc3986

https://www.w3.org/Addressing/URL/uri-spec.html

https://developers.exlibrisgroup.com/ulrichsweb/apis/ulrichsweb_sru_search_api/uri-syntax/

demo



navigator.registerProtocolHandler("web+xgqfrms", "https://www.xgqfrms.xyz?uri=%s", "自定义 URL Scheme");

error

OK



"use strict";

/**

 *

 * @author xgqfrms

 * @license MIT

 * @copyright xgqfrms

 * @created 2020-11-11

 * @modified

 *

 * @description

 * @difficulty Easy Medium Hard

 * @complexity O(n)

 * @augments

 * @example

 * @link

 * @solutions

 *

 * @best_solutions

 *

 */

const log = console.log;

let startTime = performance.now();

window.addEventListener(`load`, (e) => {

  log(`window load`);

  log(`page is fully loaded`);

});

window.addEventListener(`DOMContentLoaded`, (e) => {

  log(`window DOMContentLoaded`);

  // log(`DOM fully loaded and parsed`);

});

const logVisit = (url = ``) => {

  // Test that we have support

  if (!navigator.sendBeacon) {

    // XHR fallback

    return true;

  } else {

  // URL to send the data to, e.g.

  // let url = `/api/log`;

  // Data to send

  let data = new FormData();

  data.append(`start`, startTime);

  data.append(`end`, performance.now());

  data.append(`url`, document.URL);

  // Let`s go!

  navigator.sendBeacon(url, data);

  }

};

// 将日志记录封装到一个函数中，则可以在页面卸载时调用它。

window.addEventListener(`pagehide`, (e) => {

  log(`window beforeunload`);

  //  good place for sendBeacon

  logVisit(`/api/log`);

  if (event.persisted) {

    /* the page isn't being discarded, so it can be reused later */

  }

}, false);

document.addEventListener(`visibilitychange`, (e) => {

// window.addEventListener(`visibilitychange`, (e) => {

  log(`document.visibilityState`, document.visibilityState);

  // if (document.visibilityState === `hidden`) {

  // if (document.visibilityState === `visible`) {

  //   backgroundMusic.play();

  // } else {

  //   backgroundMusic.pause();

  // }

  // log(`window visibilitychange`);

  //  good place for sendBeacon

  logVisit(`/api/log`);

});

window.addEventListener(`beforeunload`, (e) => {

  log(`window beforeunload`);

  //  bad place for sendBeacon

  // logVisit(`/api/log`);

});

window.addEventListener(`unload`, (e) => {

  log(`window unload`);

  //  bad place for sendBeacon

  // logVisit(`/api/log`);

});

// navigator.sendBeacon(`https://www.xgqfrms.xyz/`, `hello `);


<!DOCTYPE html>

<html lang="zh-Hans">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <meta name="author" content="xgqfrms">

  <meta name="generator" content="VS code">

  <title>URL-Scheme</title>

  <style>

    * {

      box-sizing: border-box;

      margin: 0;

      padding: 0;

    }

    div{

      padding: 10px;

    }

  </style>

  <!-- <link rel="stylesheet" href="./index.css"> -->

</head>

<body>

  <header>

    <h1>URL-Scheme</h1>

  </header>

  <main>

    <div>web+???</div>

    <div>

      <a href="web+xgqfrms/cdn">web+xgqfrms/cdn</a>

    </div>

    <div>

      <a href="web+xgqfrms">web+xgqfrms</a>

    </div>

    <div>

      <a href="web+cdn">web+cdn</a>

    </div>

  </main>

  <footer>

    <p>copyright&copy; xgqfrms 2020</p>

  </footer>

  <!-- js -->

  <script src="./url-scheme.js"></script>

</body>

</html>





window.open(`web+xgqfrms`);

https://cdn.xgqfrms.xyz/URL-Scheme/

https://cdn.xgqfrms.xyz/URL-Scheme/web+xgqfrms

mailto:



<h1>mailto: & E-mail links</h1>

<a href="mailto:support@xgqfrms.xyz">send an email for support</a>

<p>...</p>

<a href="mailto:support@xgqfrms.xyz?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">

  Send mail with cc, bcc, subject and body

</a>

example



<!DOCTYPE HTML>

<html lang="zh-Hans">

<head>

  <title>Web Protocol Handler Sample - Register</title>

  <script type="text/javascript">

    const url = "https://cdn.xgqfrms.xyz/API/handler.html?msg=%s";

    if (!navigator.isProtocolHandlerRegistered("web+xgqfrms", url)) {

      navigator.registerProtocolHandler("web+xgqfrms", url, "URL Protocol");

    }

  </script>

</head>

<body>

  <h1>Web Protocol Handler Sample</h1>

  <p>This web page will install a web protocol handler for the <code>web+xgqfrms:</code> protocol.</p>

</body>

</html>


<!DOCTYPE HTML>

<html lang="zh-Hans">

<head>

  <title>Web Protocol Handler Sample - Test</title>

</head>

<body>

  <p>Hey have you seen <a href="web+xgqfrms:you%20passed%20message">this</a> before?</p>

</body>

</html>


// open

https://cdn.xgqfrms.xyz/API/handler.html?msg=%s

web+xgqfrms:you%20passed%20message

https://cdn.xgqfrms.xyz/API/handler.html?msg=web+xgqfrms:you%20passed%20message

https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers

refs

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

Navigator.registerProtocolHandler All In One的更多相关文章

  1. window.navigator All In One

    window.navigator All In One navigator "use strict"; /** * * @author xgqfrms * @license MIT ...

  2. 让Chrome 接管邮件连接，收发邮件更方便了

    页面中除了传统的超链接外,还可以将邮箱地址写入<a>标签,意思不表自明,当然是用户点击后就会打开相应的邮件客户端向这个连接指向的邮件地址发邮件. <a href="mail ...

  3. Browser detect

    A useful but often overrated JavaScript function is the browser detect. Sometimes you want to give s ...

  4. Mozilla对HTML5规范支持列表

    翻译自Mozilla Developer Network 在2009年10月28日,HTML 5规范草稿在网络超文本应用技术工作组(WHATWG)中基本出于最后定稿阶段,这意味着HTML 5标准基本定 ...

  5. jQuery 1.9不支持$.browser 怎么判断浏览器类型和版本

    $.browser.mozilla = /firefox/.test(navigator.userAgent.toLowerCase());$.browser.webkit = /webkit/.te ...

  6. html5test

    html5test Github https://github.com/NielsLeenheer/html5test 主程序是 scripts/7/engine.js 目前看到的分类大部分是基于判断 ...

  7. HTML5入门总结 HTML5API

    w3cshools  MDN英文  MDN中文 HTML5 HTML5 is the latest evolution of the standard that defines HTML. The t ...

  8. HTML5和CSS3

    一.HTML5 HTML5 是 HTML 标准的最新演进版本. 这个术语代表了两个不同的概念:它是一个新的 HTML 语言版本包含了新的元素,属性和行为,同时包含了一系列可以被用来让 Web 站点和应 ...

  9. Javascript 高级程序设计--总结【三】

    ********************  Chapter 8 BOM ******************** BOM由浏览器提供商扩展 window: 既是js访问浏览器窗口的接口,又是Globa ...

随机推荐

  1. synchronized的jvm源码分析聊锁的意义

    上篇写完了ReentrantLock源码实现,从我们的角度分析设计锁,在对比大神的实现,顺道拍了一波道哥的马屁,虽然他看不到,哈哈.这一篇我们来聊一聊synchronized的源码实现,并对比reen ...

  2. API服务接口签名代码与设计，如果你的接口不走SSL的话？

    在看下面文章之前,我们先问几个问题 rest 服务为什么需要签名? 签名的几种方式? 我认为的比较方便的快捷的签名方式(如果有大神持不同意见,可以交流!)? 怎么实现验签过程 ? 开放式open ap ...

  3. Maven 中央仓库

    概述 当你建立一个 Maven 的项目,Maven 会检查你的 pom.xml 文件,以确定哪些依赖下载.首先,Maven 将从本地资源库获得 Maven 的本地资源库依赖资源,如果没有找到,然后把它 ...

  4. OPC UA 统一架构） (二)

    OPC UA (二) 重头戏,捞取数据,才是该干的事.想获取数据,先有数据源DataPrivade,DataPrivade的数据集合不能和BaseDataVariableState的集合存储同一地址, ...

  5. 【Soul网关探秘】http数据同步-Web端处理变更通知

    个人知识库 引言 上一篇,梳理http 数据同步策略的变更通知机制,本篇开始探究配置变更通知到达后, soul-web 端的处理响应. 不同数据变更的通知机制应当是一致的,故本篇以 selector ...

  6. ReentrantReadWriteLock读写锁简单原理案例证明

    ReentrantReadWriteLock存在原因? 我们知道List的实现类ArrayList,LinkedList都是非线程安全的,Vector类通过用synchronized修饰方法保证了Li ...

  7. 使用session实现网站N天免登陆（）

    问题描述: 一些网站的N天之内免登陆实现方式. 方式一: 首先想到的是使用cookie保存用户登录信息,设置有效期,在用户下次访问时免去登录环节,直接通过cookie获取用户信息. 方式二: 方式二: ...

  8. jQuery操作CheckBox的方法(选中,取消,取值)详解

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...

  9. 织梦(DedeCms)的安全问题解决办法

    网上大家也看到DEDECMS这套程序,虽然便捷草根站长的快速建站,但安全问题也是非常多的.DEDE官方也在很久之前就已经不再对这套系统进行什么版本升级了,最多就是一些补丁修复: 好,废话不多说,下面整 ...

  10. charles（1）解决charles抓包乱码问题

    前言 当使用Charles抓包时,发现数据都是乱码,这时需要安装证书 解决办法 1.点击charles窗口,点击左上角Help-> SSL Proxying -> Install Char ...