JavaScript method to dynamically modify browser title (title)

I will tell you about a method and technique of using JavaScript to dynamically modify the browser title (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

via console.log(document.getElementsByTagName("title")[0]), I found that the b2386ffb911b14667cb8f0f91ea547a7 label can be printed out. There are only text nodes in the label, so I guess it can only recognize TextNode, so I used innerText to set the value of title, and it worked.

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 when switching browser tabs, title occurs. Change.

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 achieved in jq

Summary

In native js we can pass innerText, document.title There are two ways to dynamically modify the title of the web page.

In jq, we can modify it through $('title').html('') or $('title').text('') .

The above is the detailed method of dynamically modifying the browser title (title) with JavaScript. For more related tutorials, please visit JavaScript Video Tutorial!