平时我们推送网页、打开窗口都是用的 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. 用ABP Suite创建Blazor Server的应用程序

    这个应用程序我们取名为BlazorOne,意思是集AuthServer.HttpApi Host和Blazor Server3个功能于一体的应用程序.因为ABP Suite支持另外一种模式,是把上述3 ...

  2. 【Azure 应用服务】App Service 项目部署成功后，应用连接 Azure Redis时报错 Could not get a resource from the pool

    问题描述 App Service 项目部署成功后,需要连接到同在云上的Redis服务, Redis启动了专用终结点,只能在于Redis同一个VNET(虚拟网络)的资源能够访问.在进入App Servi ...

  3. mysql添加联合唯一索引与删除索引

    -- 添加联合唯一索引 alter table <表名> add unique index <索引名称> (name, no, org_id); -- 删除索引 ALTER T ...

  4. DDD笔记

    笔记来源于b站视频 1.系统"老化" 需求难:程序员和产品经理沟通困难,更改需求难 开发难:对于上前行代码的类,更改很难,只能用if-else 创新难:对于之前老的技术笔试SSH想 ...

  5. 我的Java面试资料推荐

    看法 每年去大厂试试水,借此来评估自己的能力.价值和不足,或许还能拿到一个好offer,是个合格程序员的职业表现 大厂面试,基本都是:先过算法,检验面试人的智商和逻辑能力:之后才考察语言.设计.中间件 ...

  6. WPF入门教程系列目录

    WPF入门教程系列一--基础 WPF入门教程系列二--Application介绍 WPF入门教程系列三--Application介绍(续) WPF入门教程系列四--Dispatcher介绍 WPF入门 ...

  7. vscode 合并分支 举例 master merge dev

    举例 将 dev 开发线 合并到 master 1 确定你在dev线,将dev代码改动全部提交 2 切换master,确定是最新代码,不确定就pull下,选择合并分支,见上图 3 在下拉的提示框中选择 ...

  8. FIR滤波器的设计和实现

    FIR的作用和价值   FIR(Finite Impulse Response)滤波器:有限长单位冲激响应滤波器,又称为非递归型滤波器,是数字信号处理系统中最基本的元件,它可以在保证任意幅频特性的同时 ...

  9. OBS无法捕获 chrome、webkit、electron窗口，捕获后黑屏

    使用 electron 打包的 pc 应用,用于直播软件推流的 OBS 捕获窗体黑屏 现象:唯独chrome浏览器 edge 浏览器等,其它窗体都正常. 猜测:是由 chromium 内核引起的 修改 ...

  10. Docker 仓库国内镜像源

    1.仓库镜像对应表 原始 镜像 docker.io ***.mirror.aliyuncs.com(点进去登录查看) hub-mirror.c.163.com dockerproxy.com quay ...