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

相关推荐
全栈技术负责人5 分钟前
大模型流式输出核心技术:智能 Markdown 渲染引擎方案
前端·javascript·vue.js
码云之上6 分钟前
让聊天机器人学会用工具,星悟接 MCP 的实践
前端·人工智能·前端框架
用户9210802628611 分钟前
从单线程到事件循环:彻底理解 JS 的同步、异步、微任务和宏任务
前端
不一样的少年_20 分钟前
明明做了很多事,为什么简历看起来还是没含金量?
前端·后端·招聘
mashang12345678923 分钟前
mac安装SnailGitLite并配置Beyond Compare
前端·macos
雪芽蓝域zzs24 分钟前
第三十四节:用户新增编辑弹窗增加 el‑tree‑select 部门选择器
前端·javascript·vue.js
程序员老赵33 分钟前
Docker 部署 go2rtc:轻松搭建摄像头多协议流媒体平台
前端·docker·直播
酷酷的逗逗乐43 分钟前
前端转 Agent 开发 · 第三节:LangChain 提示词模板
前端
Cache技术分享44 分钟前
516. Java 方法句柄 - 转换(进阶篇·下)
前端·后端
妙码生花1 小时前
全网 8k star 的 BuildAdmin 正式发布 Golang 版本,这次我们在CRUD赛道杀死了比赛。
前端·后端·ai编程