Angular Javascript修改浏览器title方法 JS动态修改浏览器标题

title 在 html 中属于特殊的节点元素。因为它可以使用document.getElementsByTagName("title")[0]来获取网页的 title 标签,但却无法用document.getElementsByTagName("title")[0].innerHtml用更改它的值。经测试原生 js 有两种方式可以修改，jQuery 中也能简单设置。

1. innerText 方式

通过console.log(document.getElementsByTagName("title")[0])发现能打印出<title>标签
标签里面只有文字节点，故猜测只能识别TextNode，所以用 innerText 方式设置 title 的值，果然成功了。

document.getElementsByTagName("title")[0].innerText = '新的页面标题';

2. document.title 方式

经过测试，还可通过 document.title 设置 title 的值。

console.log(document.title);   // 可以获取title的值。
document.title = '新的页面标题';  // 设置title的值。

例子

window.onfocus = function () {
    
    
  document.title = '恢复正常了...'
}
window.onblur = function () {
    
    
  document.title = '快回来~页面崩溃了'
}

我们在浏览器取得了焦点和失去焦点的时候改变 title 的值，可以发现切换浏览器选项卡的时候，title 发生了改变。

3. jQuery方式

当然如果你的项目里面依赖jQuery,可以使用jq的方法设置

$('title').html('') 
$('title').text('')

jQuery 中两种方式都可以实现。

4. Angular2中方法

这里需要介绍一个知识点：Title Service

Title Service 用于获取和设置当前 HTML 文档的标题

Title Service 提供了以下方法：

• setTitle()
• getTitle()

首先需要在你所应用的组件中进行导入：

import {
    
     Title } from '@angular/platform-browser';

然后要将其注入到组件中：

constructor(private titleService: Title) {
    
    
}

就可以在当前组件中调用setTitle和getTitle方法了

实例如下：

constructor(private titleService: Title) {
    
    
    titleService.setTitle('登录')
}

参考资料：https://blog.csdn.net/qq_38712932/article/details/86593967