js動態修改瀏覽器title

title在html中屬於特殊的節點元素.由於它能夠使用document.getElementsByTagName("title")[0]來獲取網頁的title標籤,但卻沒法用document.getElementsByTagName("title")[0].innerHtml用更改它的值。經測試原生js有兩種方式能夠修改，jQuery中也能簡單設置。不清楚的小夥伴們能夠了解一下。

innerText 方式

經過console.log(document.getElementsByTagName("title")[0]),發現能打印出<title>標籤，標籤裏面只有文字節點，故猜想只能識別TextNode，因此用innerText方式設置title的值，果真成功了。

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

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發生了改變。

jQuery方式

固然若是你的項目裏面依賴jQuery,能夠使用jq的方法設置

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

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

jq中兩種方式均可以實現

---

總結

原生js中咱們能夠經過 innerText , document.title 兩種方式動態修改網頁的title .
jq中咱們能夠經過 $('title').html('') 或者 $('title').text('') 進行修改。