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. Vue中组件间通信的方式

    Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...

  2. 当中台遇上DDD，我们该如何设计微服务？ - InfoQ https://www.infoq.cn/article/7QgXyp4Jh3-5Pk6LydWw

    当中台遇上DDD,我们该如何设计微服务? - InfoQ https://www.infoq.cn/article/7QgXyp4Jh3-5Pk6LydWw

  3. autocommit 隔离级别 next lock gap lock 事务隔离级别和锁

    autocommit 隔离级别 https://www.ibm.com/developerworks/cn/opensource/os-mysql-transaction-isolation-leve ...

  4. 【LinuxShell】free 命令详解

    前言 free命令用来显示Linux中的内存使用信息,包括空闲的.已用的物理内存,swap内存,及被内核使用的buffer.在Linux系统监控的工具中,free命令是最经常使用的命令之一. 命令格式 ...

  5. RocketMQ 的几个简单问题与答案

    1 单机版消息中心 一个消息中心,最基本的需要支持多生产者.多消费者,例如下: class Scratch { public static void main(String[] args) { // ...

  6. Navicat,Dbeaver,heidiSql,DataGrip数据库连接工具比较

    Navicat,Dbeaver,heidiSql,DataGrip数据库连接工具比较 1.Navicat 2.DBeaver 3.heidiSql 4.DataGrip 1.Navicat Navic ...

  7. C语言--指针数组大小

    #include <stdio.h> #include <string.h> int main(void) { char *str[3]={ "Hello,thisi ...

  8. 使用cronolog按日期分割日志

    cronologcronolog是一个简单的过滤程序从标准输入读取日志文件条目,每个条目写入到输出文件指定一个文件名模板和当前的日期和时间.当扩大的文件名更改,关闭当前文件,并打开一个新的. cron ...

  9. VXLAN理论解析

    转自:https://www.jianshu.com/p/cccfb481d548 产生背景:云计算成为企业IT建设新形态 云计算,凭借其在系统利用率高.人力/管理成本低.灵活性.可扩展性强等方面表现 ...

  10. PHP-文件、目录相关操作

    PHP-文件.目录相关操作 一  目录操作(Directory 函数允许获得关于目录及其内容的信息) 相关函数: 函数 描述 chdir() 改变当前的目录. chroot() 改变根目录. clos ...