Trust
Trust
  • 发布:2018-08-16 15:13
  • 更新:2024-07-28 10:39
  • 阅读:26731

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

分类:HTML5+

如果有小伙伴看过 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);  
});
4 关注 分享
sonicsunsky 7***@qq.com aliang888 a***@gmail.com

要回复文章请先登录注册

都广野

都广野

回复 e***@outlook.com :
请问问题1 最后找到办法了吗
2024-07-28 10:39
7***@qq.com

7***@qq.com

回复 e***@outlook.com :
App-vue的web-view加载的html页面可以运行plus的api,但注意如果该页面调用了plus.key的API监听了back按键(或使用mui的封装),会造成back监听冲突。需要该html页面移除对back的监听。或按照上面的示例代码禁止网页使用plus对象。app-nvue页面的web-view组件不能运行plus API
2024-04-25 08:43
e***@outlook.com

e***@outlook.com

请问:
1、vue中的webview在app端,怎么把app中的数据传到webview打开的网页中?
2、nvue中的webview在app端,怎么使用plus的api?直接使用plus会报错。
2023-10-19 19:46
王伟锋

王伟锋

回复 w***@126.com :
支持的
2020-11-10 10:31
w***@126.com

w***@126.com

nvue中的web-view 加载的网页支持5+吗?
2020-04-16 11:55
1***@qq.com

1***@qq.com

还是报这个呀plus is not defined
2019-08-22 10:55