WebApp快捷打包
悬浮窗口
转到模块插件

敬告:此 DEMO 演示为开放测试页面,仅用于开发者快速测试体验应用功能,请严格遵守开发者协议,了解更多

JS-SDK 引用方式:

♦ 普通网页 script 方式加载:下载最新版 jsBridge-v20241118.zip,请在页面上调用 jsBridge 接口之前引用 jsbridge-mini.js 库;

♦ js module 方式引用:npm install ym-jsbridge 具体请参考 npm package

open 打开浮窗

jsBridge.floater.open({
  //窗口设置
  window: {
    //顶边距,-1 则上下居中
    top : -1,
    //左边距,-1 则左右居中
    left: 4,
    //浮窗宽度,小于1则自动宽度
    width : 100,
    //浮窗高度,小于1则自动高度
    height: -1,
    //背景,颜色 #AARRGGBB 或图片 https://...
    //# 开头,可使用含透明值 AA 的颜色
    background: "#6650556B",
    //http(s) 开头,可使用半透明图片,背景图为平铺模式
    //background: "https://htmlapp.yimenapp.com/assets/floater/bg3.png",

    //头部,null 则无头部
    header: {
      //背景色#AARRGGBB 或 背景图片https://...
      //留空为透明
      background: "https://htmlapp.yimenapp.com/assets/floater/header.png",
      //高度
      height: 22
    },
    //中间数据展示区
    data: {
      //内边距
      padding: {
        top   : 12,
        right : 6,
        bottom: 12,
        left  : 6
      }
    },
    //底部,null 则无底部
    footer: {
      //背景色#AARRGGBB 或 背景图片https://...
      //留空为透明
      background: "https://htmlapp.yimenapp.com/assets/floater/footer.png",
      //高度
      height: 26
    }
  },
  //数据源
  data: {
    //通过此链接返回数据,显示到数据展示区(window.data)
    //返回的 json 数据结构为 { html: "HTML 格式的数据" }
    //仅支持部分 html 标签,不支持 style 等标签属性,具体请看下方说明
    url     : "https://htmlapp.yimenapp.com/doc/demo_floater_mock.cshtml",
    //刷新数据的间隔时间(毫秒),不低于 500ms
    //这是一个定时器,系统会定时 GET 请求 url 链接将其返回数据展示到浮窗上
    interval: 3000
  },
  //点击浮窗会拉起App,拉起后需要在App内打开的详情页链接
  detail_action: "https://htmlapp.yimenapp.com/doc/demo_fs.cshtml"
}, function(succ) {
  alert(succ ? "打开成功" : "打开失败,可能是没有浮窗权限。");
});

setWindowBackground 设置浮窗背景

点击 “运行” 按钮后拉动滑块设置透明度

透明 不透明

$("#bgRange").on("input propertychange", function() {
  var opacity = new Number($(this).val());
  var bg = "#" + (opacity < 16 ? "0" : "") + opacity.toString(16) + "000000";
  jsBridge.floater.setWindowBackground({
    background: bg
  });
});

close 关闭浮窗

jsBridge.floater.close(function() {
  alert("已关闭");
});

status 浮窗状态

jsBridge.floater.status(function(succ, data) {
  alert(data.opening ? "已开启浮窗" : "已关闭浮窗");
});

hasPermission 检查是否已开启浮窗权限

jsBridge.floater.hasPermission(function(has) {
  alert(has ? "有权限" : "无权限");
});

requestPermission 请求浮窗权限

jsBridge.floater.requestPermission(function(has) {
  alert(has ? "已开启权限" : "未开启权限");
});

支持有限的 HTML 标签和属性

<p>
<div>
<br>
<b>
<i>
<strong>
<em>
<u>
<tt>
<dfn>
<sub>
<sup>
<blockquote>
<cite>
<big>
<small>
<font color="..." face="...">
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

style 属性支持 color, background, background-color, text-decoration, text-align