H5页面在钉钉浏览器上动态修改标题

问题

钉钉h5在ios手机上的问题: 页面title设置不生效,必须页面强制刷新才能显示。

钉钉浏览器没有监听title属性的变更事件

解决方法

使用钉钉自带的jsapi

  1. 下载对应的包:

    npm install dingtalk-jsapi --save

  2. 在项目中新建js,封装对应的修改标题方法

    import * as dd from 'dingtalk-jsapi';

    // 改变页面title方法
    export const ChangePageTitle = (title: string) => {
    // ready方法确保API加载完成后调用biz.navigation.setTitle来改变页面标题
    dd.ready(() => {
    return dd.biz.navigation.setTitle({
    title: title,
    });
    });
    };

    // 判断是不是钉钉
    export const isDingTalk = window.navigator.userAgent.toLowerCase().includes('dingtalk');

  3. 在对应页面引入该js,使用对应方法

    // 需要使用的页面
    import { ChangePageTitle, isDingTalk } from '@/utils/dingTalk';

    onLoad: function() {
    ChangePageTitle('审批列表');
    },

相关推荐
杨超越luckly12 分钟前
HTML应用指南:利用GET请求获取全国汉堡王门店位置信息
大数据·前端·信息可视化·数据分析·html
CCChaya-软件技术教师1 小时前
24-栅格布局详解(CSS3)
前端·css·css3
BillKu1 小时前
el-input 中 select 方法使用报错:属性“select”在类型“HTMLElement”上不存在
前端·javascript·vue.js·elementui
涵信1 小时前
第一节:React 基础篇-React虚拟DOM原理及Diff算法优化策略
前端·javascript·react.js
DataFunTalk2 小时前
复旦肖仰华:大模型的数据科学!
前端·后端·算法
橙序研工坊2 小时前
JavaWeb-01-前端Web开发(HTML+CSS)
java·前端·css·html·javaweb
DataFunTalk2 小时前
重大突破!MCP加持下text-to-sql的关键技术进展
前端·后端
碳烤小咸鱼2 小时前
蓝桥杯 Web 方向入门指南:从基础到实战
前端·javascript·css·蓝桥杯
inksci2 小时前
低代码控件开发平台:飞帆中粘贴富文本的控件
前端·javascript·低代码
Mike_jia2 小时前
一篇文章带你了解一款强大的轻量级Docker可视化管理工具---Docker-UI
前端