敬告:此 DEMO 演示为开放测试页面,仅用于开发者快速测试体验应用功能,请严格遵守开发者协议,了解更多。
♦ JS-SDK 引用方式:
♦ 普通网页 script 方式加载:下载最新版 jsBridge-v20241118.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://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 ? "打开成功" : "打开失败,可能是没有浮窗权限。"); });
点击 “运行” 按钮后拉动滑块设置透明度
透明 不透明
$("#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