广告位联系
返回顶部
分享到

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

JavaScript 来源:互联网 作者:佚名 发布时间:2023-09-21 23:06:28 人浏览
摘要

smartbanner.js 适用于 iOS 和 Android 的可定制智能应用横幅(smart app banner)。简单易用,不依赖任何框架,怎么使用官方文档也写的很清楚,我就不过多介绍。传送门 基本用法 1 2 3 4 5 6 7 8 9

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

基本用法

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!-- Start SmartBanner configuration -->

<meta name="smartbanner:title" content="Smart Application">

<meta name="smartbanner:author" content="SmartBanner Contributors">

<meta name="smartbanner:price" content="FREE">

<meta name="smartbanner:price-suffix-apple" content=" - On the App Store">

<meta name="smartbanner:price-suffix-google" content=" - In Google Play">

<meta name="smartbanner:icon-apple" content="https://url/to/apple-store-icon.png">

<meta name="smartbanner:icon-google" content="https://url/to/google-play-icon.png">

<meta name="smartbanner:button" content="VIEW">

<meta name="smartbanner:button-url-apple" content="https://ios/application-url">

<meta name="smartbanner:button-url-google" content="https://android/application-url">

<meta name="smartbanner:enabled-platforms" content="android,ios">

<meta name="smartbanner:close-label" content="Close">

<!-- End SmartBanner configuration -->

引用 JavaScript 和 CSS:

1

2

<link rel="stylesheet" href="node_modules/smartbanner.js/dist/smartbanner.min.css" rel="external nofollow" >

<script src="node_modules/smartbanner.js/dist/smartbanner.min.js"></script>

高级用法

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

其实就是通过js去修改meta

1

2

3

4

5

if (navigator.language?.includes("zh")) {

    document

     .querySelector('meta[name="smartbanner:button"]')

     .setAttribute("content", "查看");

}

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

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

1

2

<!-- <meta name="smartbanner:button-url-apple" content="https://ios/application-url">

<meta name="smartbanner:button-url-google" content="https://android/application-url"> -->

1

2

3

4

5

6

7

document.addEventListener("smartbanner.view", () => {

  document.querySelector(".js_smartbanner__button").onclick = () => false;

});

document.addEventListener("smartbanner.clickout", () => {

  // 在这里做其它操作,比如手动关闭横幅

  smartbanner.exit();

});

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

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

1

<meta name="smartbanner:api" content="true">

1

2

3

4

5

6

7

const apiHandler = () => {

  if (is_weixn()) return;

  setTimeout(() => {

    if (smartbanner) smartbanner.publish();

  }, 500);

};

window.onload = apiHandler;


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
    Tag :
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计