浏览器页面间通信新接口BroadcastChannel的用法

Broadcast Channel API允许同源(同一站点)的浏览器上下文(包括窗口,标签,框架或iframe)之间的简单通信。

通信的方式如图:

用法

构建channel

var bc = new BroadcastChannel('test_channel');

test_channel参数用来指定channel的名称,连接到相同名称的BroadcastChannel,可以监听到这个channel分发的消息。

发送消息

bc.postMessage('This is a test message.'); 

接收消息

bc.onmessage = function (ev) { console.log(ev); }

关闭channel

bc.close()



版权声明:著作权归作者所有。

相关推荐

JavaScript检测Chrome浏览器是否在隐身窗口

浏览器在隐身模式下,它的FileSystem API是禁用的,可以通过检测FileSystem API来判断浏览器是否在隐身窗口。function isIncognito() {  var fs = window.RequestFileSystem || window.webkitRequestFileSystem;

Angular CLI:集成Autoprefixer兼容多浏览器以及浏览器版本

Angular CLI使用Autoprefixer来兼容不同的浏览器以及多个浏览器版本,我们不需要做额外的工作来集成Autoprefixer。Autoprefixer内部依赖于Browserslist,根据Browserslist的配置决定兼容哪些浏览器或浏览器版本。如果我们对浏览器的兼容范围有自己的需求,可以设置Browserslist的配置。集成Browserslist配置到Angu

JavaScript检测浏览器支持的视频格式以及音频格式

不同的浏览器支持的视频/音频格式有所不同,为了在多个浏览器上兼容视频/音频的播放,需要使用JavaScript检测浏览器所支持的视频/音频格式。HTMLVideoElement和HTMLAudioElement继承于HTMLMediaElement,HTMLMediaElement的canPlayType()方法可以用来判断浏览器是否支持指定的多媒体格式。语法str = aud

页面调试禁用Chrome浏览器的缓存

在前端开发过程中,页面调试时常常需要清理浏览器的缓存,下面介绍两种禁用Chrome缓存的方法。方法一:1、F12打开开发这工具2、选中开发者工具的Network标签3、把Disable cache勾选上,如图注意:禁用Chrome的缓存只有在开发者工具打开时才起作用。方法二安装清理缓存的Chrome插件。可以试一下Cache Killer。