美文网首页Vue
Vue<动态修改浏览器头部小图标及标题>

Vue<动态修改浏览器头部小图标及标题>

作者: 誰在花里胡哨 | 来源:发表于2020-02-25 09:43 被阅读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>
    

    相关文章

      网友评论

        本文标题:Vue<动态修改浏览器头部小图标及标题>

        本文链接:https://www.haomeiwen.com/subject/uelzqhtx.html