敬告:此 DEMO 演示为开放测试页面,仅用于开发者快速测试体验应用功能,请严格遵守开发者协议,了解更多。
♦ JS-SDK 引用方式:
♦ 普通网页 script 方式加载:下载最新版 jsBridge-v20251019.zip,请在页面上调用 jsBridge 接口之前引用 jsbridge-mini.js 库;
♦ js module 方式引用:npm install ym-jsbridge 具体请参考 npm package
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://www.b1bw.com/assets/floater/bg3.png",
//头部,null 则无头部
header: {
//背景色#AARRGGBB 或 背景图片https://...
//留空为透明
background: "https://www.b1bw.com/assets/floater/header.png",
//高度
height: 22
},
//中间数据展示区
data: {
//内边距
padding: {
top : 12,
right : 6,
bottom: 12,
left : 6
}
},
//底部,null 则无底部
footer: {
//背景色#AARRGGBB 或 背景图片https://...
//留空为透明
background: "https://www.b1bw.com/assets/floater/footer.png",
//高度
height: 26
}
},
//数据源
data: {
//通过此链接返回数据,显示到数据展示区(window.data)
//返回的 json 数据结构为 { html: "HTML 格式的数据" }
//仅支持部分 html 标签,不支持 style 等标签属性,具体请看下方说明
url : "https://www.b1bw.com/doc/demo_floater_mock.cshtml",
//刷新数据的间隔时间(毫秒),不低于 500ms
//这是一个定时器,系统会定时 GET 请求 url 链接将其返回数据展示到浮窗上
interval: 3000
},
//点击浮窗会拉起App,拉起后需要在App内打开的详情页链接
detail_action: "https://www.b1bw.com/doc/demo_fs.cshtml"
}, function(succ) {
alert(succ ? "打开成功" : "打开失败,可能是没有浮窗权限。");
});
点击 “运行” 按钮后拉动滑块设置透明度
透明 不透明
$("#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
});
});
jsBridge.floater.close(function() {
alert("已关闭");
});
jsBridge.floater.status(function(succ, data) {
alert(data.opening ? "已开启浮窗" : "已关闭浮窗");
});
jsBridge.floater.hasPermission(function(has) {
alert(has ? "有权限" : "无权限");
});
jsBridge.floater.requestPermission(function(has) {
alert(has ? "已开启权限" : "未开启权限");
});
<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