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

时间 2019-12-04 标签实现 web 项目多个页面之间互相通讯 web 多屏通讯

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

这是发送数据的页面：
html

<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 onclick="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多行代码，感兴趣能够看一下它的源码。