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('审批列表');
    },

相关推荐
颜进强1 分钟前
25 · NestJs DurableProviders 持久化 Provider:把 ContextId 当缓存键
前端·后端·ai编程
爱丶不疚1 分钟前
Electron: Sentry 都采集了什么?你知道吗
前端·electron
恋猫de小郭6 分钟前
Dart 4.0 要彻底移除 dart:mirrors,Augmentations 应该要来了
android·前端·flutter
流水白开7 分钟前
React的Virtual DOM、Diff算法和Fiber
前端·react.js
乘风gg9 分钟前
Spec Kit vs OpenSpec vs Superpowers:我为什么最后自己搭了一套
前端·ai编程·claude
颜进强11 分钟前
24 · NestJs LazyLoadingModules 懒加载模块:你在前端天天 `import()` 懒路由,但 Nest 偏偏不能懒加载路由
前端·后端·ai编程
传人15 分钟前
页面中心圆圈放大效果如何写
前端·css
liangshanbo121516 分钟前
前端面试题:微信小程序怎么优化性能?
前端·微信小程序·notepad++