vue动态修改浏览器title和icon图标

news2024/11/25 5:17:43

vue动态修改浏览器title和icon图标

实例代码

setTitleIcon(){
  var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
  link.type = 'image/x-icon';
  link.rel = 'shortcut icon';
  link.href = '/002.png'; // 图片放public目录
  document.getElementsByTagName('head')[0].appendChild(link);
  document.getElementsByTagName("title")[0].innerText = '动态修改title的值';
}

图片

在这里插入图片描述

效果

在这里插入图片描述

简写

setTitleIcon(){
  var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
  link.href = '/002.png'; // 图片放public目录
  document.getElementsByTagName('head')[0].appendChild(link);
  document.getElementsByTagName("title")[0].innerText = '动态修改title的值';
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1024211.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

PHP8的类与对象的基本操作之类的实例化-PHP8知识详解

定义完类和方法后,并不是真正创建一个对象。类和对象可以描述为如下关系。类用来描述具有相同数据结构和特征的“一组对象”,“类”是“对象”的抽象,而“对象”是“类”的具体实例,即一个类中的对象具有相同的“型”,…

循环神经网络-02文本预处理

https://zh-v2.d2l.ai/chapter_recurrent-neural-networks/text-preprocessing.html 本节中,我们将解析文本的常见预处理步骤。 这些步骤通常包括: 将文本作为字符串加载到内存中。 将字符串拆分为词元(如单词和字符)。 建立一个…

QT---day3---9.19

1> 完成文本编辑器的保存工作 ui界面&#xff1a; 头文件&#xff1a; #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QFontDialog> #include <QMessageBox> #include <QColor> #include <QColorDialog> #include <QFo…

计算机竞赛 深度学习 python opencv 实现人脸年龄性别识别

文章目录 0 前言1 项目课题介绍2 关键技术2.1 卷积神经网络2.2 卷积层2.3 池化层2.4 激活函数&#xff1a;2.5 全连接层 3 使用tensorflow中keras模块实现卷积神经网络4 Keras介绍4.1 Keras深度学习模型4.2 Keras中重要的预定义对象4.3 Keras的网络层构造 5 数据集处理训练5.1 …

IDEA全局替换快捷键有大坑---详解

1、ctl shift r 可选择范围最小就是包 那么必然就会造成全局替换过了&#xff01;&#xff01;&#xff01;&#xff01; 2、ctl r实现当前类全局替换 因为这个坑&#xff0c;浪费大爷我2小时。艹

认识一下Git

目录 Git Git下载 Git安装 Git初始化 Git操作 Git、GitLab、和Eclipse是公司中软件开发常用的组合&#xff1a; 1. Git&#xff1a;Git是一种分布式版本控制系统&#xff0c;用于跟踪文件和代码的变化。它提供了管理代码仓库的功能&#xff0c;可以记录每次提交的修改&am…

Python语言:列表初体验

列表是Python中的一个对象&#xff0c;他类似于C语言中的数组&#xff0c;可以存储许多数据&#xff0c;也可以称之为数据集合。他原则是可以存储不同类型的数据&#xff0c;一般不建议这样使用&#xff0c;有点奇怪&#xff1b;一般情况下一个列表中保存的都是同一种类型的数据…

Matlab中 * 与 .* 的区别

* 用于矩阵乘法 示例1&#xff1a; 注&#xff1a; 表示转置&#xff0c;即矩阵a的转置 乘以 矩阵b 根据矩阵乘法&#xff0c;r结果为&#xff1a; 示例2&#xff1a; 矩阵a 乘以 矩阵b的转置 根据矩阵乘法&#xff0c;结果为&#xff1a; .* 用于对应位置单个元素相乘 示例…

【虚幻引擎】UE5 VLC接入网络监控、视频直播、网络直播支持RTSP、RTMP

一、如何更新自己的插件匹配自己想要的UE版本 我们在网上下载的插件一般是UE4版本的插件&#xff0c;这个时候就需要我们自己去修改编译&#xff0c;接下来教大家修改插件来适配自己的引擎。 如果不想自己编译代码&#xff0c;可以直接找我拿编译好的UE5.0、UE5.1、UE5.2的插件…

[hive]搭建hive3.1.2hiveserver2高可用可hive metastore高可用

参考: Apache hive 3.1.2从单机到高可用部署 HiveServer2高可用 Metastore高可用 hive on spark hiveserver2 web UI 高可用集群启动脚本_薛定谔的猫不吃猫粮的博客-CSDN博客 没用里头的hive on spark,测试后发现版本冲突 一、Hive 集群规划(蓝色部分) ck1ck2ck3Secondary…

Meow

环境准备 操作系统:Kali Linux 或者 Windows工具:nmap,telnet nmap工具 [Kali 官网] 手册地址:https://www.kali.org/tools/nmap/ 摘要: Nmap is a utility for network exploration or security auditing. It supports ping scanning (determine which hosts are up), many…

Linux之动静态库

动静态库 动静态库的基本原理动静态库的认识动静态库特征静态库的打包与使用动态库的打包与使用 动静态库的基本原理 我们知道&#xff0c;生成一个可执行程序会经历以下四个步骤&#xff1a; 预处理&#xff1a;头文件展开&#xff0c;宏替换&#xff0c;去注释&#xff0c;…

iOS16新特性:实时活动-在锁屏界面实时更新APP消息 | 京东云技术团队

简介 之前在 《iOS16新特性:灵动岛适配开发与到家业务场景结合的探索实践》 里介绍了iOS16新的特性&#xff1a;实时更新&#xff08;Live Activity&#xff09;中灵动岛的适配流程&#xff0c;但其实除了灵动岛的展示样式&#xff0c;Live Activity还有一种非常实用的应用场景…

【Verilog教程】2.3 Verilog 数据类型

Verilog 最常用的 2 种数据类型就是线网&#xff08;wire&#xff09;与寄存器&#xff08;reg&#xff09;&#xff0c;其余类型可以理解为这两种数据类型的扩展或辅助。 线网&#xff08;wire&#xff09; wire 类型表示硬件单元之间的物理连线&#xff0c;由其连接的器件输…

脑网络图谱

前言 研究人脑面临的一个挑战是其多尺度组织和系统复杂性。我们对大脑组织的认识主要来源于离体组织学检查&#xff0c;如细胞结构映射。通过研究全脑微观结构特征的变化&#xff0c;可以划分为不同的脑区。然而&#xff0c;这种研究大脑组织的“局部”方法非常耗时、耗资源&a…

Python 图形化界面基础篇:创建工具栏

Python 图形化界面基础篇&#xff1a;创建工具栏 引言 Tkinter 库简介步骤1&#xff1a;导入 Tkinter 模块步骤2&#xff1a;创建 Tkinter 窗口步骤3&#xff1a;创建工具栏步骤4&#xff1a;向工具栏添加工具按钮步骤5&#xff1a;处理工具按钮的点击事件步骤6&#xff1a;启动…

window10下安装docker教程

要在Windows 10上安装Docker&#xff0c;您可以按照以下步骤进行操作&#xff1a; 在您的Web浏览器中&#xff0c;访问Docker官方网站&#xff1a;https://www.docker.com/get-started。然后&#xff0c;点击"Download Docker Desktop"按钮。 在下载页面上&#xff…

ruoyi-vue-pro 项目安装使用过程中的问题解决

ruoyi-vue-pro是功能比较多的一款前后端平台,因为刚接触ruoyi平台不久&#xff0c;为了更好了解ruoyi平台的相关功能&#xff0c;就本地部署了&#xff0c;作者主动屏蔽了部分功能&#xff0c;部分功能会提示功能能未启用&#xff0c;同时启用dev环境的时候是演示版本&#xff…

使用香橙派学习Linux udev的rules 并实现U盘的自动挂载

在之前编程首先语音刷抖音的博文里提到过udev&#xff0c;现在回顾一下&#xff1a; 什么是udev&#xff1f; udev是一个设备管理工具&#xff0c;udev以守护进程的形式运行&#xff0c;通过侦听内核发出来的uevent来管理/dev目录下的设备文件。udev在用户空间运行&#xff0c;…

SQL Server关于AlwaysOn的理解-读写分离的误区(一)

前言 很多人认为AlwaysOn在同步提交模式下数据是实时同步的&#xff0c;也就是说在主副本写入数据后可以在辅助副本立即查询到。因此期望实现一个彻底的读写分离策略&#xff0c;即所有的写语句在主副本上&#xff0c;所有的只读语句分离到辅助副本上。这是一个认知误区&#x…