JavaScript动态修改浏览器标题的几种实现方式

JavaScript修改浏览器标题概述

HTML中的title标签是一个特殊的节点元素。虽然可以通过document.getElementsByTagName("title")[0]获取该标签，但尝试通过.innerHtml属性修改其值会失败。经过测试，原生JavaScript提供了两种有效的修改方式，同时jQuery也能轻松实现这一功能。

原生JS实现方式

innerText 方式

通过console.log(document.getElementsByTagName("title")[0])可以发现，该标签内部仅包含文字节点，因此推测系统仅识别TextNode。基于此推测，使用innerText方式设置title的值确实能够成功生效。

document.getElementsByTagName("title")[0].innerText = '需要设置的值';

document.title方式

测试表明，直接通过document.title属性同样可以设置网页标题的值。

console.log(document.title);      # 可以获取title的值。
document.title = '需要设置的值';    # 设置title的值。

动态切换标题示例

例子

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

以下示例演示了如何在浏览器窗口获得焦点和失去焦点时动态改变title值。当用户切换浏览器选项卡时，可以看到标题随之发生变化。

jQuery实现方式

jQuery方式

如果项目环境中已经引入了jQuery库，可以直接利用jQuery提供的方法来设置标题。

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

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

在jQuery中，上述两种思路均可实现标题修改。

总结

在原生JavaScript中，可以通过innerText属性或直接赋值document.title这两种方式来动态修改网页标题。

在jQuery环境中，可以通过$('title').html('')或者$('title').text('')这两种方法进行修改。

以上即为JS更改浏览器TITLE的详细方法，觉得有用可以收藏备用。