vue/vue3/js来动态修改我们的界面浏览器上面的文字和图标

前言:

整理vue/vue3项目中修改界面浏览器上面的文字和图标的方法。

效果:

vue2/vue3: 默认修改

public/index.html index.html

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="icon" type="image/svg+xml" href="图标地址" />
    <title>显示文字</title>
... //图标放在public里面

js:动态修改

动态修改文字

javascript 复制代码
let title = "新的标题"; // 设置新的标题
document.title = title; // 动态修改网站标题

动态修改icon图标

javascript 复制代码
function changeFavicon(link) {
  let $favicon = document.querySelector('link[rel="icon"]');
  if ($favicon !== null) {
    $favicon.href = link;
  } else {
    $favicon = document.createElement("link");
    $favicon.rel = "icon";
    $favicon.href = link;
    document.head.appendChild($favicon);
  }
}

let iconUrl = "新的图标地址"; // 设置新的图标地址
changeFavicon(iconUrl); // 动态修改网站图标
相关推荐
+VX:Fegn08954 小时前
计算机毕业设计|基于springboot + vue蛋糕店管理系统(源码+数据库+文档)
前端·数据库·vue.js·spring boot·课程设计
半个落月5 小时前
LangChain.js Agent Memory 实战(下):用 Milvus 构建可检索的长期记忆
javascript·langchain
半个落月5 小时前
LangChain.js Agent Memory 实战(上):从内存对话、文件持久化到截断与摘要
javascript·langchain
Nicander6 小时前
我给 Excalidraw 做了一个本地工作区:DrawSpace
前端·开源
linux_cfan7 小时前
17 · 引擎适配器全景:HLS/DASH/Vimeo/Mux/Cast
前端·javascript·音视频
计算机魔术师8 小时前
烧掉2780亿美元还不够?OpenAI的资本豪赌让人头皮发麻
前端
IT_陈寒9 小时前
Java线程池用错参数,我的服务居然悄悄崩溃了
前端·人工智能·后端
卡布鲁9 小时前
React useMemo 与 useCallback 完全指南:原理、场景与避坑
前端·react.js
碳基修炼9 小时前
排查记:本地 devServer 是 http,浏览器却把 302 重定向升级成了 https
前端·http
步行cgn9 小时前
Spring p 命名空间注入详解
java·前端·spring