kn007的个人博客
♥ You are here: Home > 点滴记录 > js改变浏览器标签标题

js改变浏览器标签标题

by | 41 Comments

提醒:本文最后更新于 3222 天前,文中所描述的信息可能已发生改变,请仔细核实。

71e1fa669d4cc8bb5cfd8c3eaf75c6ff如题,因为Chatbox写了个对象。。。好吧,写了个Object:

var changeTitle = {
	time: 0,
	originTitle: document.title,
	timer: null,
	change: function() {
		document.title = "~New Message Received~ " + changeTitle.originTitle;
	},
	notify: function() {
		if(document.title.indexOf("~New Message Received~")) clearTimeout(changeTitle.timer);
		document.title = "~New Message Received~ " + changeTitle.originTitle;
		changeTitle.timer = setTimeout(function(){changeTitle.clear();},3000);
	},
	flash: function() {
		changeTitle.timer = setTimeout(function () {
			changeTitle.time++;
			changeTitle.flash();
			if (changeTitle.time % 2 === 0) {
				document.title = "~                    ~ " + changeTitle.originTitle;
			}else{
				document.title = "~New Message Received~ " + changeTitle.originTitle;
			}
		}, 500);
	},
	reset: function() {
		clearTimeout(changeTitle.timer);
		document.title = changeTitle.originTitle;
	}
};

通过以下方法可以调用:

changeTitle.change();//更改标题
changeTitle.notify();//更改标题3秒后恢复
changeTitle.flash();//闪烁标题
changeTitle.reset();//复位标题

通过监听visibilitychange,你可以完成一些有意思的动作,比如进入和离开页面时改变标题(具体应该说标签为非前置状态时改变标题,标签前置状态时改变标题):

var changeTitle={time:0,originTitle:document.title,timer:null,change:function(){document.title="~New Message Received~ "+changeTitle.originTitle},notify:function(){if(document.title.indexOf("~New Message Received~"))clearTimeout(changeTitle.timer);document.title="~New Message Received~ "+changeTitle.originTitle;changeTitle.timer=setTimeout(function(){changeTitle.reset()},3000)},flash:function(){changeTitle.timer=setTimeout(function(){changeTitle.time++;changeTitle.flash();if(changeTitle.time%2===0){document.title="~                    ~ "+changeTitle.originTitle}else{document.title="~New Message Received~ "+changeTitle.originTitle}},500)},reset:function(){clearTimeout(changeTitle.timer);document.title=changeTitle.originTitle}};
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        changeTitle.flash();
    } else {
        changeTitle.reset();
    }
});

上述例子,为方便显示把changeTitle对象压缩了。

最后,为情人节干杯。

转载请注明转自:kn007的个人博客的《js改变浏览器标签标题

donate
有所帮助?

Comments

41 Comments立即评论
  1. 回复

    如果是手机浏览器,基本起不了作用。 :evil:

    1. MOD回复

      @milk: 还真没考虑手机 :o 手机最好用移动端主题或客户端

    2. 回复

      @kn007: 个人博客又不是维基百科,专门下载客户端的读者可能会很少吧。
      @kn007:

    3. MOD回复

      @milk: 恩是的,所以在手机上也可以通过网页。

  2. 话说上次差点被这个网站的标题给萌翻了~

    https://blog.lwl12.com/

    1. MOD回复

      @Jerry Qu: 他啊,笑~

  3. Repo里加了个beta版,欢迎试用~

    1. MOD回复

      @ArchiTech: 我昨晚就看到了,看到Admin大改版

  4. 太技术了,就不学了吧。

    1. MOD回复
  5. 玩代码有时候很兴奋,呵呵,尤其是你想折腾某个效果。

    1. MOD回复

      @郑永: 嗯

icon_wink.gificon_neutral.gificon_mad.gificon_twisted.gificon_smile.gificon_eek.gificon_sad.gificon_rolleyes.gificon_razz.gificon_redface.gificon_surprised.gificon_mrgreen.gificon_lol.gificon_idea.gificon_biggrin.gificon_evil.gificon_cry.gificon_cool.gificon_arrow.gificon_confused.gificon_question.gificon_exclaim.gif