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

相关推荐
软件聚导航10 分钟前
「聚小软 AI 助手」技术升级:从数据库检索到 RAG 知识库问答
前端·数据库·mysql·微信小程序·小程序·ai编程·rag
恋猫de小郭1 小时前
看懂大模型架构术语,帮助你理解目前常见的大模型开源架构
前端·人工智能·ai编程
yma161 小时前
通过提示词实现GitHub Pages 和 Nginx 双部署竟然这么简单?
前端
前端 贾公子1 小时前
第09章:上下文与记忆 (2)
java·服务器·前端
可乐鸡翅yeah_1 小时前
第三方接口对接 M3U8 流媒体排坑实战,解决外部服务商流兼容难题
前端·javascript·python·django·html·m3u8·m3u8在线
GoppViper1 小时前
RDF资源描述框架深度解析:语义Web的数据基石与实战逻辑
前端·数据库
郑州光合科技余经理1 小时前
本地生活服务系统:模块边界与结算字段怎么拆
java·开发语言·前端·后端·系统架构·uni-app·php
IT_陈寒1 小时前
Vue的嵌套组件竟然吃掉了我的事件?
前端·人工智能·后端
默_笙1 小时前
🏠 「LLM Notes」:我用 Next.js + Redis 给自己造了个笔记博客
前端·javascript
风骏时光牛马2 小时前
AI开发平台异常指标实时监控告警
前端