其实要实现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多行代码,感兴趣可以看一下它的源码。