smartbanner.js实现可定制智能应用横幅使用示例

目录

• 引言
• 基本用法
• 高级用法
• 如何根据系统语言动态修改横幅文案
• 如何自己处理点击按钮事件
• 如何在微信浏览器内不显示横幅

引言

smartbanner.js 适用于 iOS 和 Android 的可定制智能应用横幅(smart app banner)。简单易用，不依赖任何框架，怎么使用官方文档也写的很清楚，我就不过多介绍。 传送门

基本用法

引用 JavaScript 和 CSS：

高级用法

如何根据系统语言动态修改横幅文案

其实就是通过js去修改meta

if (navigator.language?.includes("zh")) {
    document
     .querySelector('meta[name="smartbanner:button"]')
     .setAttribute("content", "查看");
}

如何自己处理点击按钮事件

需要先移除对应的meta，禁用按钮点击事件

document.addEventListener("smartbanner.view", () => {
  document.querySelector(".js_smartbanner__button").onclick = () => false;
});
document.addEventListener("smartbanner.clickout", () => {
  // 在这里做其它操作，比如手动关闭横幅
  smartbanner.exit();
});

如何在微信浏览器内不显示横幅

先新增meta禁用自动添加到DOM，再调用api手动添加到DOM。判断微信浏览器的代码我就不贴出来了。

const apiHandler = () => {
  if (is_weixn()) return;
  setTimeout(() => {
    if (smartbanner) smartbanner.publish();
  }, 500);
};
window.onload = apiHandler;

以上就是smartbanner.js实现可定制智能应用横幅使用示例的详细内容，更多关于smartbanner.js可定制智能横幅的资料请关注脚本之家其它相关文章！