平时我们推送网页、打开窗口都是用的 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. 数据结构(三):舞伴配对问题(C++，队列)

    好家伙, 题目如下: 1.舞伴配对问题:假设在周末舞会上,男士们和女士们进入舞厅时,各自排成一队.跳舞开始时,依次从男队和女队的队头上各出一人配成舞伴. 2.若两队初始人数不相同,则较长的那一队中未配 ...

  2. 在Vue中使用Canvas绘制背景

    好家伙, 在vue中使用canvas绘制与在html中使用canvas绘制大致相同, 但又有所区别  法一(无图片资源): vue中canvas的使用 - 掘金 (juejin.cn) 找到canca ...

  3. MacOS安装多个jdk

    环境 Mac os 为Yosemite 10.10.5版本,想要同时使用jdk7和jdk8. 下载jdk:http://www.Oracle.com/technetwork/Java/javase/d ...

  4. linux复习基础命令

    Linux基础命令 学习目标 了解vm备份的两种方式 了解快照和克隆的区别 了解linux系统文件 掌握基础命令 指定vmtools的作用 1 vm两种备份方式 为什么要进行备份 保证centos操作 ...

  5. 电子设备内幕：RAM和ROM小百科

    大家好,我是知微. 在智能手机出现之前,大家对RAM和ROM这两个词都没什么概念.如今很多手机在宣传的时候,都会标明有多大的RAM(运行内存)和ROM(存储空间),因为这在很大程度上影响手机的使用流畅 ...

  6. 16 Educational Codeforces Round 142 (Rated for Div. 2)C. Min Max Sort（递归、思维、dp）

    C. Min Max Sort 很不错的一道题目,不过脑电波和出题人每对上,\(qwq.\) 正难则反. 我们考虑最后一步是怎么操作的. 最后一步一定是对\(1\)和\(n\)进行操作 那么上一步呢? ...

  7. Spring多线程事务处理

    一.背景 本文主要介绍了spring多线程事务的解决方案,心急的可以跳过上面的理论介绍分析部分直接看最终解决方案. 在我们日常的业务活动中,经常会出现大规模的修改插入操作,比如在3.0的活动赛事创建, ...

  8. 玩转Vue3之shallowRef和shallowReactive

    前言 Vue3 作为一款现代的 JavaScript 框架,引入了许多新的特性和改进,其中包括 shallowRef 和 shallowReactive.这两个功能在Vue 3中提供了更加灵活和高效的 ...

  9. debian在使用Thunderbird时英文改为中文

    sudo apt-get install thunder* 随后重启应用!

  10. 音频重采样48kk转16k

    作为一个音频算法工程师,不懂重采样怎么可以呢?这里做一个常用的方法介绍: pcm转wav: ffmpeg -f s16le -ar 8000 -ac 2 -i out.pcm -ar 44100 -a ...