H5修改标题（适用安卓和IOS）

原创已于 2022-12-15 17:40:20 修改 · 1.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2018-04-17 10:03:02 首次发布

Web前端专栏收录该内容

26 篇文章

订阅专栏

本文介绍两种在H5页面中动态修改浏览器标题的方法，并解释了为何针对微信环境需额外插入隐藏的iframe元素来触发标题更新。适用于企微H5、普通H5及PC端web页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用场景：企微H5，微信H5，普通H5，PC端的web页面

第一种写法：（以前用过）

const titleUtil = {};

titleUtil.setTitle = (title) => {
    document.title = title;
    let ua = navigator.userAgent;
    if (/\bMicroMessenger\/([\d.]+)/.test(ua) && /ip(hone|od|ad)/i.test(ua)) {
        var i = document.createElement('iframe');
        i.src = '/favicon.ico';
        i.style.display = 'none';
        i.onload = () => {
            setTimeout(() => {
                i.remove();
            }, 9);
        };
        document.body.appendChild(i);
    }
};

export default titleUtil;

第二种写法：（现在项目中使用）

// 动态修改页面标题
  editPageTitle(name){
    document.title = name
    const i = document.createElement('iframe')
    i.src = '/favicon.ico'
    i.style.display = 'none'
    i.onload = function () {
      setTimeout(function () {
        i.remove()
      }, 9)
    }
    document.body.appendChild(i)
  }

参阅出处：https://segmentfault.com/a/1190000006147838