ie、chrome、firefox桌面通知实现、播放声音实现

最新推荐文章于 2023-08-07 15:52:36 发布

最新推荐文章于 2023-08-07 15:52:36 发布 · 750 阅读

javascript html5 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种跨浏览器的网页提示与通知技术方案，包括播放声音、标题栏跑马灯、窗口闪动等提示方式及桌面通知的实现。重点讨论了在不同浏览器环境下（如IE、Firefox、Chrome）采用不同的技术手段来实现这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/***
*
*@author zhhaogen@163.com
*
**/
var message=
{
	ieinjur:false,
	pmdtid:null,
	title:null,
	shtid:null,
	wstid:null,
	//播放声音
	playSound:function(src)
	{
		var div=document.getElementById("playercnt");//播放div
		if(div==null)
		{
			div=document.createElement("div");
			div.id="playercnt";
			div.setAttribute("style","display:none");
			document.body.appendChild(div);
		}
		if(document.createElement('audio').play==null)
		{
			//ie
			div.innerHTML="<EMBED id='player' src='"+src+"' hidden='true'  loop='false' autostart='true'>";
		}else
		{
			div.innerHTML="<audio id='player' src='"+src+"' hidden autoplay></audio>";
		}
	},
	//标题栏跑马灯
	titleScroll:function(msg,ops)
	{
		if(this.pmdtid!=null)
		{
			clearInterval(this.pmdtid);
			document.title=this.title;
			this.pmdtid=null;
		}
		if(ops=="stop")
		{
			 clearInterval(this.pmdtid);
			 document.title=this.title;
			 this.pmdtid=null;
			 return;
		}
		this.title=document.title;
		var n=0;
		var max=parseInt(ops)||1000;
		var pmd=function()
		{
			msg=msg+msg.substr(0,1);
			msg=msg.substr(1);
			document.title=msg+"  "+message.title;//原来标题加上消息标题
			n++;
			if(n>max)
			{
				clearInterval(message.pmdtid);
				document.title=message.title;
			}
		}
		this.pmdtid=setInterval(pmd,600);
	},
	//标题栏闪烁
	titleShan:function(msg,ops)
	{
		if(this.shtid!=null)
		{
			clearInterval(this.shtid);
			document.title=this.title;
			this.shtid=null;
		}
		if(ops=="stop")
		{
			 clearInterval(this.shtid);
			 document.title=this.title;
			this.shtid=null;
			 return;
		}
		this.title=document.title;
		var space="  ";
		for(var i=0;i<msg.length;i++)
		{
			space=space+"  ";
		}
		var n=0;
		var max=parseInt(ops)||1000;
		var pmd=function()
		{
			if (n % 2 == 0) 
			{   
					document.title = "【"+msg+"】" + message.title;   
            }else
			{   
					document.title = "【"+space+"】" + message.title; 
            };   
			n++;
			if(n>max)
			{
				clearInterval(message.shtid);
				document.title=message.title;
			}
		}
		this.shtid=setInterval(pmd,600);
	},
	//窗口闪动
	windowShan:function(ops)
	{
		clearInterval(this.wstid);
		if(ops=="stop")
		{
			 clearInterval(this.wstid);
			 return;
		}
		var n=0;
		var max=parseInt(ops)||20;
		var pmd=function()
		{
			if (n % 2 == 0) 
			{   
					window.moveBy(5,0); 
            }else
			{   
					window.moveBy(-5,0);
            };   
			n++;
			if(n>max)
			{
				clearInterval(message.wstid);
			}
		}
		this.wstid=setInterval(pmd,200);
	},	//桌面通知权限
	noticeinit:function()
	{
		if(window.webkitNotifications)
		{
			if (window.webkitNotifications.checkPermission() != 0) 
			{
				console.log("chrome 桌面通知请求");
				window.webkitNotifications.requestPermission();
			}
			 
		}else if (window.Notification && Notification.permission !== "granted") 
		{
			Notification.requestPermission(function (status) 
			{
			  if (Notification.permission !== status) 
			  {
				Notification.permission = status;
			  }
			});
		}else
		{
			//ie
			//注入vbscript	
			if(!this.ieinjur)
			{
			var d=document.createElement("script");	
			d.type="text/vbscript";
			d.text ="Function noticeie(title,body) MsgBox body,64,title  End Function";
			var head = document.getElementsByTagName("head")[0] ||document.documentElement;
			head.appendChild(d);
			this.ieinjur=true;	
			}			
		}
	},
	//桌面通知
	notice:function(title,msg,icon)
	{
		if(window.webkitNotifications)
		{
			if(window.webkitNotifications.checkPermission() != 0)
			{
				message.noticeinit();
			}
			else
			{
				console.log("webkit 通知");
				var n = webkitNotifications.createNotification(icon,title, msg);
				n.show();
				n.ondisplay = function() { };   
				n.onclose = function() { };  
				var cancle=function(){n.cancle};
				setTimeout(cancle, 5000); 
			}
 
		}		
		else if (window.Notification) 
		{
			if(Notification.permission == "granted")
			{
				console.log("firefox 通知");
				var n = new Notification(title,{ icon:icon,body:msg});
			}else
			{
				message.noticeinit();
			}	
		}else//ie
		{
			try
			{
			noticeie(title,msg);
			}catch(ee)
			{
			}
	
		}
	}
}
message.noticeinit();

测试通过ie7、firefox 24、chrome 32.0.1700.6 Aura

1.播放声音ie使用EMBED标签、其他使用html5的audio标签

2.桌面通知chrome虽然实现了Notification 但似乎没有效果，并且使用Notification.requestPermission会导致浏览器崩溃，所以只能使用自家的webkitNotifications，另外需注意的是webkitNotifications.requestPermission()需要手动触发

document.onclick=function(){message.noticeinit()};

firefox实现桌面通知就比较简单了，参照html5 的桌面通知就行了

3.ie可以使用vbscript 的msgbox模拟桌面通知,因为msgbox会是系统重新对焦在ie浏览器上

效果图

chrome

firefox

ie7