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 提供了以下方法:
首先需要在你所应用的组件中进行导入:
扫描二维码关注公众号,回复:
11894418 查看本文章
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