实现Web项目多个页面之间互相通信(web多屏通信)

最新推荐文章于 2024-05-08 13:29:48 发布

TimeTDIT

最新推荐文章于 2024-05-08 13:29:48 发布

阅读量1.7w

点赞数 2

分类专栏： js 文章标签： js 分屏数据传输 lsbridge

本文链接：https://blog.csdn.net/qq_35580883/article/details/78144739

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

其实要实现web多屏通信很简单，github上有一个叫做lsbridge的项目，使用其中的lsbridge.js即可以实现多屏传输数据，而且很简单很方便。但是要求要在同一个浏览器内

这是发送数据的页面：

<html>
<head>
<meta charset="utf-8"/>
<title>test1</title>
</head>
<script src="lsbridge.js"></script><!--引入lsbridge.js-->
<script type="text/javascript">
    function sendData() {
        lsbridge.send('my-namespace', {message: 'Hello world!'}); //使用lsbridge.send()函数发送json
        //使用一个命名空间，这里是'my-namespace'，发送一个json，这里是{message:'Hello world!'}
    }
</script>
<body>

    <button οnclick="sendData()">test</button> <!--onclick触发事件 发送json数据-->
</body>
</html>

这是接收数据的页面：

<html>
<head>
<meta charset="utf-8"/>
<title>test2</title>
</head>
<script src="lsbridge.js"></script><!--接收数据同样需要引入lsbridge.js-->
<script type="text/javascript">
            lsbridge.subscribe('my-namespace', function(data) {//使用lsbridge.subscribe()函数接收数据 有回调函数function(data) data为接收到的数据
                //使用传过来的json做想做的事
            });
</script>
<body>

</body>
</html>

以上就是lsbridge实现分屏传输数据，同时lsbridge.js写得也很简短，大约100多行代码，感兴趣可以看一下它的源码。