How to modify browser title using javascript

Let me tell you a method and technique for using JavaScript to modify the browser title. Friends who need it can test the code.

title is a special node element in HTML. Because it can use document.getElementsByTagName("title")[0] to get the title tag of the web page, but it cannot use document.getElementsByTagName("title") [0].innerHtml is used to change its value. After testing, there are two ways to modify native js, and it can also be easily set in jQuery. Friends who are not sure can find out.

innerText method

Through console.log(document.getElementsByTagName("title")[0]), I found that the b2386ffb911b14667cb8f0f91ea547a7 label can be printed. There are only text nodes in the label, so I guess Only TextNode can be recognized, so setting the value of title using innerText method was successful.

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

document.title method

After testing, the value of title can also be set through document.title.

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

Example

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

We change the value of title when the browser gains focus and loses focus. You can find that the title changes when switching browser tabs.

jQuery method

Of course, if your project relies on jQuery, you can use the jq method to set it

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

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

Both methods can be implemented in jq

Summary

In native js, we can dynamically modify the title of the web page through innerText and document.title.

In jq, we can use $('title').html('') Or $('title').text('') to modify.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to determine whether jQuery is loaded

How to use the React Native screenshot component (detailed tutorial)

How to use state and setState in react (detailed tutorial)

How to add a mobile phone verification code component in Vue

How to control the global console.log switch in Vue

How to prohibit the bottom page of the pop-up window from scrolling

The above is the detailed content of How to modify browser title using javascript. For more information, please follow other related articles on the PHP Chinese website!