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

相关推荐
小KK_10 分钟前
新手必看篇——JS类型判断
前端·javascript
小小高不懂写代码17 分钟前
Vibe Coding时代的自我鞭策
前端·人工智能
喵个咪23 分钟前
基于 Nuxt 4 的现代 Headless CMS 前端:架构深度解析与二次开发指南
前端·vue.js·nuxt.js
AI科技星25 分钟前
万有引力G与真空介电常数ε0全维度完整关系式汇编(基于v=c螺旋时空理论)
c语言·开发语言·前端·javascript·网络·汇编·electron
喵个咪31 分钟前
基于 Next.js 的 Headless CMS 前端架构:技术解析与二次开发导引
前端·react.js·next.js
阿白同学10545134 分钟前
一座前端文明的地层:React 源码考古报告
前端
七牛云行业应用34 分钟前
别手搓多Agent了!Codex Windows版用Git Worktree并行跑代码,真的香
前端
前端环境观察室35 分钟前
指纹浏览器都用了,为什么任务还是要人盯着?
前端
lichenyang45342 分钟前
鸿蒙聊天 Demo 练习 11:路由拦截器 + dialog 路由 + 页面生命周期
前端
铁皮饭盒44 分钟前
Bun 提供了许多 Node.js 原生没有的专属 API
前端·后端