Vue<动态修改浏览器头部小图标及标题>
2020-02-25 本文已影响0人
誰在花里胡哨
修改位置：
此处是如何动态修改的，如果你想要简单的配置图标的话，点击查看可以 此篇文章
image.png
在index.html里面进行配置（.ico为你要动态更换的图标）
image.png
代码如下：
<!DOCTYPE html>
<html>
<head>
<!-- UC强制全屏 -->
<!-- <meta name="full-screen" content="yes">
<meta name="browsermode" content="application"> -->
<!-- QQ强制全屏 -->
<!-- <meta name="x5-orientation" content="portrait">
<meta name="x5-fullscreen" content="true">
<meta name="x5-page-mode" content="app"> -->
<meta charset="utf-8">
<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title></title>
<!-- <link rel="Shortcut Icon" href="../../../static/AXXXXXXXXX.ico" type="image/x-icon" /> -->
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script>
//此处是通过判断session里面存储的渠道CHANNEL进行判断
var channel = window.sessionStorage.CHANNEL
var head = document.getElementsByTagName('head')[0];
var ico;
//创建一个<link>标签
var linkTag = document.createElement('link');
//配置<link>标签的相关属性
linkTag.setAttribute("rel", "Shortcut Icon")
linkTag.setAttribute("type", "image/x-icon")
//根据渠道配置不同的图标以及标题文字
if (channel == 'TIANXIANG') {
//更改标题文字
document.getElementsByTagName("title")[0].innerText = '天象';
//配置之前创建<link>标签的引用图标路径
ico = "../../../static/TIANXIANG.ico"
linkTag.href = ico
} else if (channel == "ZMPH") {
document.getElementsByTagName("title")[0].innerText = '中民普惠';
} else {
ico = "../../../static/AXXXXXXXXX.ico"
linkTag.href = ico
}
//添加到<head>头部中
head.appendChild(linkTag)
</script>
</html>
