欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

smartbanner.js實(shí)現(xiàn)可定制智能應(yīng)用橫幅使用示例

 更新時(shí)間：2023年03月02日 15:06:08   作者：簡(jiǎn)單不容易  
這篇文章主要為大家介紹了smartbanner.js實(shí)現(xiàn)可定制智能應(yīng)用橫幅使用示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

smartbanner.js 適用于 iOS 和 Android 的可定制智能應(yīng)用橫幅(smart app banner)。簡(jiǎn)單易用，不依賴任何框架，怎么使用官方文檔也寫的很清楚，我就不過(guò)多介紹。 傳送門

基本用法

<!-- 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：

<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>

高級(jí)用法

如何根據(jù)系統(tǒng)語(yǔ)言動(dòng)態(tài)修改橫幅文案

其實(shí)就是通過(guò)js去修改meta

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

如何自己處理點(diǎn)擊按鈕事件

需要先移除對(duì)應(yīng)的meta，禁用按鈕點(diǎn)擊事件

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

document.addEventListener("smartbanner.view", () => {
  document.querySelector(".js_smartbanner__button").onclick = () => false;
});
document.addEventListener("smartbanner.clickout", () => {
  // 在這里做其它操作，比如手動(dòng)關(guān)閉橫幅
  smartbanner.exit();
});

如何在微信瀏覽器內(nèi)不顯示橫幅

先新增meta禁用自動(dòng)添加到DOM，再調(diào)用api手動(dòng)添加到DOM。判斷微信瀏覽器的代碼我就不貼出來(lái)了。

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

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

以上就是smartbanner.js實(shí)現(xiàn)可定制智能應(yīng)用橫幅使用示例的詳細(xì)內(nèi)容，更多關(guān)于smartbanner.js可定制智能橫幅的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論