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. 转 8 jmeter之集合点

    8 jmeter之集合点   集合点:集合点用以同步虚拟用户,以便恰好在同一时刻执行任务.在测试计划中,可能会要求系统能够承受1000 人同时提交数据,在LoadRunner 中可以通过在提交数据操作 ...

  2. 解决Linux下mysql区分大小写的问题

    1.查看lower_case_table_names的值,0代表区分大小写,1代表不区分大小写. 通过命令:SHOW VARIABLES LIKE 'lower%'; 1. 解决方法 以root用户登 ...

  3. 阿里云ECS hadoop+spark+zookeeper+hive code-server 集群搭建

    懒得重新排版然后发到博客了.用在线文档看吧 https://www.kdocs.cn/l/srV6o8rABW9V 用线上IDE(code-server)写scala的时候,出现BUG可以参考下面两篇 ...

  4. BBR implements bbr-like limiter 限流

    pkg/ratelimit/bbr/bbr.go:68 github.com/go-kratos // BBR implements bbr-like limiter.// It is inspire ...

  5. cpdd 坐标：SD

    updata on:2021.1.17 闲来无事继续鸽 性别:男 先鸽一会想起来再填/se

  6. ThinkPHP3.2.4 order方法注入

    漏洞详情: 漏洞文件:./ThinkPHP\Library\Think\Db\Driver.class.php 中的 parseOrder方法: 这也是继上次order方法注入之后的修复手段. 可以看 ...

  7. 一：优化Docker中的Spring Boot应用：单层镜像方法

    优化Docker中的Spring Boot应用:单层镜像方法 1.Docker关键概念 2.镜像层内容很重要 3.镜像层影响部署 4.Docker中的Spring Boot应用 5.单层方法 5.1 ...

  8. Django(静态文件or路由)

    静态文件 在开发中同创会使用到 css,js,img等静态文件,这里带大家简单的介绍一下django如何处理静态页面, 配置 setting.py文件 STATIC_URL = '/static/' ...

  9. typedef void (*sighandler_t)(int);

    typedef void (*sighandler_t)(int); sighandler_t signal(int signum, sighandler_t handler); ---------- ...

  10. 设计模式（十四）——模板模式（SpringIOC源码分析）

    1 豆浆制作问题 编写制作豆浆的程序,说明如下: 1) 制作豆浆的流程 选材--->添加配料--->浸泡--->放到豆浆机打碎 2) 通过添加不同的配料,可以制作出不同口味的豆浆 3 ...