iOS 设备上 HTML5 的一些 feature
iOS 设备上音频无法自动播放：Safari developer
Vue.Js 的 click 也无法让音频播放：Vue.js nextTick issues
主要原因是：
iOS requires user input for showing keyboard. Before Vue uses micro task so user click counts as a valid trigger for keyboard. However, in 2.5 we uses macro task so iOS no longer treats it as trigger.
这个 feature 目前导致的问题：
- 使用 Vue.js 的 click 事件无法让一个 input / textarea 的状态变成 focus
- 使用 Vue.js 的 click 事件无法让一个媒体资源开始播放
focus 解决方法：
// 使用原生 Js 来监听 button 的 click 事件，让可输入区域 focus
hackFocus ({ source, target, event, statement }) {
if (!(source instanceof Element) || !(target instanceof Element) || !statement) {
return
}
source.addEventListener(event, function () {
target.style.display = 'block'
target.focus()
})
}
遗漏问题：
- 如果触发可输入区域 focus 的 button 只有一个，那么这种实现方案还是可以接受的
- 如果有多个 button，并且这些 button 是动态追加到 DOM 中的（翻页），那就很复杂了
- 首先它会导致代码难以维护，点击不同 button 它触发的事件参数都是不同的，statement 也是不同的
- 所以目前想到的方法是使用事件委托，并且使用HTML原生的 data-xxx 属性来做 statement
// 这里简单的用 commentAble 代替 statement
if (commentAble) {
const input = document.getElementById('comment');
[].forEach.call(document.querySelectorAll('.comments-wrap'), (wrap) => {
wrap.addEventListener('click', (e) => {
if (/(reply-btn|ic-comment)/.test(e.target.className)) {
window.__drawer_pos = window.scrollY // 记录focus前窗口的距离顶部的高度
input.style.display = 'block'
input.focus()
}
})
})
}
media 解决方案：
- 不要使用 Vue.js，使用原生的方案
// 绑定原生事件
[].forEach.call(document.querySelectorAll('.audio-item'), item => {
item.addEventListener('click', () => {
// 调用 vue 的 method 处理 state 并播放
this.playing()
})
});
遗留问题：
- 页面复杂后代码很难维护，特别是要支持 SSR 并且要支持 App 内调用另一种播放策略时
- [TODO]如何自动播放下一首？
