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

相关推荐
小满zs31 分钟前
Next.js第十六章(font字体)
前端·next.js
喝拿铁写前端5 小时前
别再让 AI 直接写页面了:一种更稳的中后台开发方式
前端·人工智能
A向前奔跑7 小时前
前端实现实现视频播放的方案和面试问题
前端·音视频
十一.3667 小时前
131-133 定时器的应用
前端·javascript·html
xhxxx8 小时前
你的 AI 为什么总答非所问?缺的不是智商,是“记忆系统”
前端·langchain·llm
3824278278 小时前
python:输出JSON
前端·python·json
2503_928411569 小时前
12.22 wxml语法
开发语言·前端·javascript
光影少年9 小时前
Vue2 Diff和Vue 3 Diff实现及底层原理
前端·javascript·vue.js
傻啦嘿哟9 小时前
隧道代理“请求监控”实战:动态调整采集策略的完整指南
前端·javascript·vue.js