平时我们推送网页、打开窗口都是用的 window.open，但是谷歌却不支持这种方法，也不是不支持，是可以打开窗口，但是无法将窗口移动到扩展屏上。

后面经过百度，发现了一个支持谷歌推送网页到扩展屏的方法：PresentationRequest

完整demo：

亲测有效

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

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

    <title>谷歌推送网页</title>

</head>

<body>

    <button onclick="test1()">推送</button>

    <!-- <button onclick="test2()">重连</button> -->

    <!-- <button onclick="test3()">关闭连接</button> -->

    <button onclick="test4()">关闭弹窗</button>

    <script>

        // document: https://w3c.github.io/presentation-api/

        var request = new PresentationRequest("https://baidu.com");

        navigator.presentation.defaultRequest = request;

        let con;

        var pId;

        function test1(){

            request.start().then(connect=>{

                console.log(connect.url)

                console.log(connect.id)

                pId = connect.id

            }).catch(err=>{console.log(err)});

        }

        // 监测连接是否可用

        request.addEventListener("connectionavailable", function(e){

            con = e.connection;

            con.addEventListener("close", function(){console.log("closed");})

            con.addEventListener("terminate", function(){console.log("terminated");})

            con.addEventListener("message", function(e){console.log(e.data);})

        })

        function test2(){

            request.reconnect(pId)

        }

        function test3(){

            con.close()

        }

        function test4(){

            con.terminate()

        }

    </script>

</body>

</html>

js推送网页到扩展屏上--谷歌浏览器的更多相关文章

  1. 解决本地项目推送到码云(github),上提示：failed to push some refs to ...

    本地项目上传github 命令如下: 1.git init 2.git add . 3.git commit  -m "init" 4.git remote add origin ...

  2. iOS上简单推送通知（Push Notification）的实现

    iOS上简单推送通知(Push Notification)的实现 根据这篇很好的教程(http://www.raywenderlich.com/3443/apple-push-notification ...

  3. ASP.NET SignaiR 实现消息的即时推送，并使用Push.js实现通知

    一.使用背景 1. SignalR是什么? ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.实时 Web 功能是指 ...

  4. NET SignaiR 实现消息的推送，并使用Push.js实现通知

    一.使用背景 1. SignalR是什么? ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.实时 Web 功能是指 ...

  5. 【IoT平台技术对接分享】如何上传正确的消息推送证书

    消息推送应用实现消息推送的接口,部署证书,同时上传根证书到平台. 目前消息推送失败,很大一部分原因是证书上传不对.推荐小伙伴们使用下面的方法导出证书. 推送:平台调用应用服务器的restful接口将数 ...

  6. 关于 实时推送技术--WebSocket的 知识分享

    今天学习了关于WebSocket的知识,觉得挺有用的,在这记录一下,也和大家分享一下!!有兴趣的可以看看哦 WebSocket简介 Web领域的实时推送技术,也被称作Realtime技术.这种技术要达 ...

  7. 【Android应用开发】 推送原理解析 极光推送使用详解 (零基础精通推送)

    作者 : octopus_truth 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/45046283 推送技术产生场景 : -- ...

  8. asp.net mvc 实现简单的实时消息推送

    因为项目需要,需要在网页上实现消息的推送.在百度上搜索了一下,发现实现网页上的消息推送,可以使用asp.net 中的SignalR类库,当然也可以使用H5的WebSocket  Ajax的轮回.当然此 ...

  9. 手把手教你配置苹果APNS推送服务|钿畑的博客 | 钿畑的博客

    http://www.360doc.com/content/15/0118/17/1073512_441822850.shtml# 钿畑的文章索引 1. 什么是推送通知 2. 什么是APNS? 3. ...

  10. 【DWR系列02】-DWR逆向Ajax即服务器推送

    .literal { background-color: #f2f2f2; border: 1px solid #cccccc; padding: 1px 3px 0; white-space: no ...

随机推荐

  1. 【Azure 媒体服务】在Azure Media Service门户中使用HLS模式传输视频流，播放视频步骤

    问题描述 如何在Azure Media Service门户中使用HLS模式传输视频流,播放视频步骤 问题解决 第一步:在 Media Service 这边点击资产.上传本地视频资源作为Media Se ...

  2. 2、dubbo原理

    图例说明: 图中左边淡蓝背景的为服务消费方使用的接口,右边淡绿色背景的为服务提供方使用的接口,位于中轴线上的为双方都用到的接口. 图中从下至上分为十层,各层均为单向依赖,右边的黑色箭头代表层之间的依赖 ...

  3. vue-helper 点击跳转插件 在 methods里面互相调用函数，会产生两个函数definitions ，然后就回弹出框让你选择，解决方案是加配置

    vue-helper 点击跳转插件 在 methods里面互相调用函数,会产生两个函数definitions ,然后就回弹出框让你选择 原因:换了台电脑,又从新配置下vscode "edit ...

  4. github git clone下载加速 && npm install 下载加速

    git clone https://pd.zwc365.com/seturl/< https 开头的项目地址> npm install --registry=https://registr ...

  5. linux程序运行结果在打印到屏幕的同时写入文件

    1.使用script工具 script工具是一个非常使用的工具,可以把输出到终端的信息记录下来.使用方法如: (1)输入 script log.txt命令开始保存终端输出的信息 ,其中log.txt为 ...

  6. KTL 一个支持C++14编辑公式的K线技术工具平台 - 第八版，数据解析。附带通达信gbbq解码。

    K,K线,Candle蜡烛图. T,技术分析,工具平台 L,公式Language语言使用c++14,Lite小巧简易. 项目仓库:https://github.com/bbqz007/KTL 国内仓库 ...

  7. idea使用Mybatis Log查看执行的sql语句

    参考,欢迎点击原文:https://www.jb51.net/article/195895.htm https://blog.csdn.net/qq2710393/article/details/83 ...

  8. Linux 使用 selenium 环境配置

    1.需要安装 Chrome 浏览器 yum install https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64 ...

  9. Snackbar源码分析

    目录介绍 1.最简单创造方法 1.1 Snackbar作用 1.2 最简单的创建 1.3 Snackbar消失的几种方式 2.源码分析 2.1 Snackbar的make方法源码分析 2.2 对Sna ...

  10. 用Vue3.0 写过组件吗？如果想实现一个 Modal你会怎么设计？

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 一.组件设计 组件就是把图形.非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式 现在有一个场景,点击新增与编辑都弹框出来进行 ...