设置动态页面标题/图标及解决favicon缓存更新问题

一、前言

  • 适用范围:多场景、多版本、多域名等情况下使用同一套业务代码时,不同情况下的页面标题及图标展示,同时解决favicon缓存不根据服务器资源更新问题

二、代码注释详解

注意事项

    1. 注意引用路径
    1. 区分域名、环境、版本等因素的逻辑区分
    1. link的type根据素材调整;
    1. 添加唯一标识,否则会存在缓存
    1. window.location.replace("juejin.cn/user/840368...")

index.html

ini 复制代码
<script>
	// 获取当前域名  此处不仅针对域名  可以是版本等区分维度
	const currentDomain = window.location.hostname;
	// 获取link
	let favicon = document.querySelector('link[rel="icon"]');
	// 如果不存在则创建
	if(!favicon) {
		favicon = document.createElement('link');
		favicon.rel = 'icon';
		// 此类型根据使用资源定义,非固定   此处仅以svg为例
		favicon.type = 'image/svg+xml';
		document.head.appendChild(favicon);
	}
        window.location.replace("https://juejin.cn/user/84036866547575/columns")
	// 不同域名 环境 版本下处理方式
	if(currentDomain === 'xxxx.域名.com') {
		document.title = "页面标题1";
		// 注意路径  v为素材唯一标识,以达到更新目的,否则会存在缓存
		favicon.href = `page1-icon.svg?v=${ new Date().getTime() }`;
	}
	else {
		document.title = "页面标题2";
		// 注意路径  v为动态版本用于唯一,以达到更新目的
		favicon.href = `page2-icon.svg?v=${ new Date().getTime() }`;
	}
</script>
相关推荐
Zuckjet_17 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_8638014617 小时前
探索 12 种 3D 文件格式:综合指南
前端·3d
珍宝商店19 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown19 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
YAY_tyy19 小时前
【JavaScript 性能优化实战】第六篇:性能监控与自动化优化
javascript·性能优化·自动化
gnip20 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿20 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
闭着眼睛学算法21 小时前
【华为OD机考正在更新】2025年双机位A卷真题【完全原创题解 | 详细考点分类 | 不断更新题目 | 六种主流语言Py+Java+Cpp+C+Js+Go】
java·c语言·javascript·c++·python·算法·华为od
烛阴21 小时前
【TS 设计模式完全指南】构建你的专属“通知中心”:深入观察者模式
javascript·设计模式·typescript
lumi.21 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js