plusready html5,封装一个简单实用的 plusready 方法

如果有小伙伴看过 mui.js 的源码的话,对于以下代码就不会陌生。

var plusReady = function (callback) {

if (window.plus) {

callback();

} else {

document.addEventListener('plusready', callback);

}

};

这个方法,是用来确保 5+ API 扩展成功了,在这个方法的回调中调用 5+ 扩展 API,不会出现 plus is not defined 错误。

因为 Android 和 iOS 的一些机制不同,再加上不同的 ROM 和 Webview 都会对 5+ 扩展 API 的注入生效有所影响。

因此,实际应用中判定扩展完成,并不能单靠 plusready 事件。

情况一

在页面加载完成之前就已经触发了 plusready 事件,window.plus 扩展对象已经存在了。这时候,是不会重复触发 plusready 事件了。因此,在页面中是监听不到 plusready 事件了。也就有了先判定 window.plus 是否存在的逻辑。

情况二

页面加载后,扩展 API 加载完成,触发 plusready 事件。此时,是可以在页面中监听到 plusready 事件的。因此,就有了监听 plusready 事件触发的逻辑。

考虑到以上这些情况,就可以确保在这个 plusReady 的回调中,调用扩展的 window.plus 对象不会出现未定义的情况。

但是依旧有特殊的情况,那就是页面中本身引入了其它框架或者自己定义了 window.plus 对象,约定的原生能力扩展对象 window.plus 被占用了。

应当避免这种情况的发生,即便是引入其它库,也是可以修改其源码来处理的。

前面提到了,5+ 扩展 API 注入的时机是不确定的,因此如果只是单一的将已存在的 window.plus 对象重新赋值给其它变量,也会造成一定的隐患。

plusReady(function () {

alert(plus.runtime.appid);

});

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值