中国网站设计师,婚纱摄影网站模板之家,河南旅游集团 网站建设,好的外贸平台当系统在浏览器中打开时#xff0c;浏览器页签会根据主页配置中的title和favicon显示#xff0c;如何能根据系统配置#xff0c;动态的更换title和icon呢#xff1f;
vue中的配置
vue项目中默认是在index.html页面上设置的
!DOCTYPE html
html langen…当系统在浏览器中打开时浏览器页签会根据主页配置中的title和favicon显示如何能根据系统配置动态的更换title和icon呢
vue中的配置
vue项目中默认是在index.html页面上设置的
!DOCTYPE html
html langenheadmeta charsetutf-8 /!--favicon 图标--link relshortcut icon typeimage/x-icon href% BASE_URL %favicon.ico /title系统名称/title/head
/html
动态修改
在日常开发中无论是单机部署还是saas应用都会面临对系统的个性化设置所以根据系统配置动态修改title和icon是经常遇到的需求。
1、title
可以直接使用 document.title 来设置页面的标题浏览器支持所有主要浏览器都支持
2、favicon
Favicon 是显示在浏览器标签上的标志一般为当前网站的Logo用于快速识别系统或网站。 静态设置示例
link relshortcut icon typeimage/x-icon hreffavicon.ico /动态设置
根据静态设置的原理我们只要动态的修改ffavicon的href地址就可以动态配置化显示了 代码示例(vuets)
interface Element {href?: string;
}
const defaultLink: Element {href: ,
};
/*** 修改网站Favicon * param newIconPath Favicon 地址*/
export function changeFavicon(newIconPath: string) {if (!newIconPath) {return false;}let link: Element defaultLink;link document.querySelector(link[relshortcut icon]) as Element;if (link link.href) {link.href newIconPath;} else {const newLink document.createElement(link);newLink.rel shortcut icon;newLink.href newIconPath;document.head.appendChild(newLink);}
}
/*** 修改网站标题* param title*/
export function changeTitle(title: string, icon: string) {if (title) {document.title title;}if (icon) {changeFavicon(icon);}
}
在获取系统配置后调用此方法动态修改title和Favicon
