用 javascript 动态设置页面标题和图标：document.title = "新标题" 即可改标题；通过 queryselector 查找或 createelement 创建 并更新 href 来换图标；ios 微信需用 iframe 触发重绘以确保标题生效。
用 JavaScript 设置页面标题和图标，核心就两条：改 document.title 换标题，操作 <link rel="icon"> 标签换图标。两者都支持动态更新，无需刷新页面。
设置页面标题（最简单直接）
只需一行代码：
-
document.title = "新标题";—— 这是最推荐、兼容性最好、写法最简洁的方式 - 不建议用
document.getElementsByTagName("title")[0].innerText，虽然能生效，但属于绕路操作，语义不清且冗余 - 标题修改会立即反映在浏览器标签页、任务栏、收藏夹等位置
更换网页图标（favicon）
图标不是直接“设置”，而是找到或创建一个 <link rel="icon"> 标签，并更新它的 href 属性：
- 先尝试查找已存在的 icon 标签：
const link = document.querySelector('link[rel="icon"]'); - 如果存在，直接改地址：
link.href = "/new-icon.ico"; - 如果不存在，新建并插入到
中：
const link = document.createElement('link');
link.rel = 'icon';
link.type = 'image/x-icon';
link.href = '/new-icon.png'; // 支持 .png、.ico、.svg 等格式
document.head.appendChild(link);
注意：部分旧版 Safari 或微信内置浏览器对 .png 图标支持不稳定，生产环境建议提供 .ico 格式（含多尺寸）。
微信浏览器的特殊处理
在 iOS 微信中，仅执行 document.title = "xxx" 常常不生效——标签页标题不会更新。需配合 iframe 触发重绘：
- 设置标题后，立刻创建一个隐藏
<iframe></iframe>加载 favicon：
document.title = "新标题";
const iframe = document.createElement('iframe');
iframe.src = '/favicon.ico';
iframe.style.display = 'none';
iframe.onload = () => setTimeout(() => iframe.remove(), 10);
document.body.appendChild(iframe);
这个技巧利用了微信对 iframe 加载完成事件的响应机制，是目前最稳定可靠的兼容方案。
封装成可复用函数
把常用逻辑打包，便于项目中多次调用：
- 标题设置函数（带微信兼容）：
function setDocumentTitle(title) {
document.title = title;
if (/MicroMessenger/i.test(navigator.userAgent) && /iPad|iPhone|iPod/.test(navigator.userAgent)) {
const i = document.createElement('iframe');
i.src = '/favicon.ico';
i.style.display = 'none';
i.onload = () => setTimeout(() => i.remove(), 10);
document.body.appendChild(i);
}
}
- 图标切换函数（自动处理存在性）：
function setFavicon(href) {
let link = document.querySelector('link[rel="icon"]');
if (!link) {
link = document.createElement('link');
link.rel = 'icon';
document.head.appendChild(link);
}
link.href = href;
}
调用示例：setDocumentTitle("订单提交成功"); setFavicon("/icons/success.png");
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
