Broadcast Channel
PostMessage
跨域通信
同源能信
前言目前现代浏览器(支持最新ES标准)前端通信有PostMessage和Boradcast Channel两种消息机制。这里介绍Broadcast Channel APIBroadcast Channel API 可以实现同 源 下浏览器不同窗口，Tab 页，frame 或者 iframe 下的 浏览器上下文 (通常是同一个网站下不同的页面) 之间的简单通讯。通过创建一个监听某个频道下的 BroadcastChannel 对象，你可以接收发送给该频道的所有消息。一个有意思的点是，你不需要再维护需...
39
前言坚持写博客第32天： 了解现代Web API之WakeLock保持屏幕换醒状态WakeLock这是一个实验中的功能,并不是所有浏览器都支持。当应用程序需要保持运行时，屏幕唤醒锁定API提供了一种防止设备变暗或锁定屏幕的方法。例子：navigator.wakeLock.request("screen")WakeLock.request()安全上下文: 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。WakeLock.request(wakeLockT...
50
使用JavaScript AudioContext相关API实现的音乐播放，同步显示歌词(LRC)，频谱以及进度显示和改变播放进度等。其中进度相关的实现感觉还是不太对路，暂时也没有查到对路的方法。不清楚为什么context.currentTime不是buffer实时的currentTime。对于这个问题，后面BufferSource换用HTML5 Audio标签（mediaElement）做为AudioContext就简单多了。。。应该是两者的应用场景不同，我还没搞清楚吧。注意：以下内容是&nb...
35
乍一想，好像媒介查询很简单，已经一直在用的东西，还有什么好学的。看了大佬的文章才知道。还有这么多好玩的东西可以学可以用！我以为我所熟知的：@media (max-width: 640px) { /* css here */}就这？大佬教我的：一、媒介查询的更多打开方式媒介查询不只是能用在CSS代码块中，还可以用在引入CSS的链接中，甚至是JavaScript中。例如：<link&nbs...
38
CSS3D
transform
perspective
第29天了，不知道再写些什么了。就再复习复习CSS 3D吧。了解下基本的3D概念，就是二维变三维。从x,y坐标到x,yz坐标。CSS 3D采用左手坐标系伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上。其余的手指指向前方，这样就建立了一个左手坐标系。其中，拇指、食指和其余手指分别代表x，y，z轴的正方向...
37
CSS渐变
linear-gradient
radial-gradient
CSS渐变有两种线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 径向渐变（Radial Gradients）- 由它们的中心定义由于<gradient>数据类型系<image>的子数据类型，<gradient>只能被用于<image>可以使用的地方。因此，linear-gradient() 并不适用于background-color以及类似的使用 <color>数据类型的属性中。...
41
这是一条普通的HTML分割线<hr class="line1">两条实线.line1{ border: 0; border-bottom: 3px double; }一条虚线.line1{ border: 0; border-bottom: 1px dotted; }一条可控线段长度与间距...
42
浏览器默认行为如果浏览器不是强制刷新（Ctrl + F5），而是普通刷新（点击刷新按钮，或者按下 F5 刷新），则页面重新载入完毕后，滚动条会调到之前访问的位置。大多数时候，这种体验对用户是友好的。但如果我我们希望滚动条回到顶部该如何处理？不优雅的方式：在页面加载完成事件中执行：document.documentElement.scrollTop = 0原生的 API浏览器已经提供了原生的 API，可以轻松实现浏览器滚动后每次都回到顶部的能力。只需在页面中执行：if ...
49
