平时我们推送网页、打开窗口都是用的 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. NodeJS内存泄露

    p.p1 { margin: 0; font: 13px "Helvetica Neue"; color: rgba(0, 0, 0, 1) } p.p2 { margin: 0; ...

  2. 【Azure Redis】Redis导入备份文件(RDB)失败的原因

    问题描述 在测试Azure Redis的导入/导出备份文件的功能中,突然发现在Redis 4.0上导入的时候,一直报错. 问题解答 因为门户上只是显示导入失败,没有任何错误消息说明.根据常理推断,Re ...

  3. Java // 使用二维数组打印 10 行杨辉三角

    1 // 使用二维数组打印 10 行杨辉三角 2 public static void main(String[] args) 3 { 4 //1.声明 并初始化二维数组 5 int[][]yangh ...

  4. 使用PdfSharp从模板生成Pdf文件

    ​ 最近在做一个生成文档的需求.通过先制作一个包含各字段占位符的文档模板,导入这个模板并填写内容替换掉占位符,再输出成最终文件. 由于版式固定,安全性更好,业务上常用Pdf作为最终标准化的格式, 在. ...

  5. if (ctx.ifTo(ctx.property, next)) return

    if (ctx.ifTo(ctx.property, next)) return if (ctx.ifGoto(ctx.property, 'functionName')) return 试试 a & ...

  6. react中css里面 class中的 图片的相对地址 完美解决 backgroundImage

    发现问题:缓存 之前react的图片,也在style里面,也无所谓. 刚做了一个输入框,change的时候改变图片,每次都刷新图片,关键是没缓存,这哪受得了 之前用的: 网上搜索各种插件,替换什么的, ...

  7. idea dev 分支合并到 master 流程

    合并分支前要全部提交 包括config.js 要不merge时候很麻烦 1 切换到master分支 Checkout 2 Merge into Current 3 commit push 4 切换回d ...

  8. Spring Boot 2.0 新人会踩的坑--启动报404错误

    转载自:http://www.javaman.cn/channels/sb2 启动程序,验证效果 根据图示,点击按钮,来启动 Spring Boot Web 程序, 查看控制台输出: . ____ _ ...

  9. 新服务器搭建docker跑mysql+java项目

    参考:https://js.work/posts/1362ba443b35d(yum安装java17) 踩了两个坑,一个前面的conf文件里监听80的配置没有删除掉,一个项目配置里面的路径还在用服务器 ...

  10. C++ 萃取机 Iterator Traits

    Iterator Traits 萃取出 Iterator 的性质:迭代器种类.迭代器所指数据类型.迭代器距离类型.迭代器所指数据引用.迭代器所指数据指针.根据不同的迭代器种类可以采取不同的算法策略.但 ...