框架中改变父框架标题实现新消息的提醒
2013/3/8 9:14:19 | 阅3493 | 来源:好空间网络 [打印] [关闭] |
最近写了个程序,要求用户有新消息的时候标题栏有个 新消息在一闪一闪的,提示用户有新信息,上网搜索了一凡这个不难很快实现了...
把代码给出来方便大家查阅
<script type="text/javascript">
var newMessageRemind={
_step: 0,
_title: document.title,
_timer: null,
//显示新消息提示
show:function(){
var temps = newMessageRemind._title.replace("【 】", "").replace("【新消息】", "");
newMessageRemind._timer = setTimeout(function() {
newMessageRemind.show();
//这里写Cookie操作
newMessageRemind._step++;
if (newMessageRemind._step == 3) { newMessageRemind._step = 1 };
if (newMessageRemind._step == 1) { document.title = "【 】" + temps };
if (newMessageRemind._step == 2) { document.title = "【新消息】" + temps };
}, 400);
return [newMessageRemind._timer, newMessageRemind._title];
},
//取消新消息提示
clear: function(){
clearTimeout(newMessageRemind._timer );
document.title = newMessageRemind._title;
//这里写Cookie操作
}
};
newMessageRemind.show();
function clearNewMessageRemind() {
newMessageRemind.clear();
}
</script>
这样就实现了网页的新消息闪动提醒.....
但是这样并不算完,因为开发后台的时候,后台使用了框架技术....而子框架页设置了这段代码后,并不没有效果,,因为父框架遮盖了子框架的标题,其实浏览器并没有显示子框架的标题
现在我需要用子框架页来调用修改父框架页的标题!
要实现子框架页修改父框架页的标题其实只需要把上面的代码稍微修改即可实现
把 所有的 document.title 修改为 window.parent.document.title 这样就可以了,,,
修改后如下
<script type="text/javascript">
var newMessageRemind={
_step: 0,
_title: window.parent.document.title,
_timer: null,
//显示新消息提示
show:function(){
var temps = newMessageRemind._title.replace("【 】", "").replace("【新消息】", "");
newMessageRemind._timer = setTimeout(function() {
newMessageRemind.show();
//这里写Cookie操作
newMessageRemind._step++;
if (newMessageRemind._step == 3) { newMessageRemind._step = 1 };
if (newMessageRemind._step == 1) { window.parent.document.title = "【 】" + temps };
if (newMessageRemind._step == 2) { window.parent.document.title = "【新消息】" + temps };
}, 400);
return [newMessageRemind._timer, newMessageRemind._title];
},
//取消新消息提示
clear: function(){
clearTimeout(newMessageRemind._timer );
window.parent.document.title = newMessageRemind._title;
//这里写Cookie操作
}
};
newMessageRemind.show();
function clearNewMessageRemind() {
newMessageRemind.clear();
}
</script>
这里需要修改的地方我用红色的字体标注出来了,本程序在www.jspkongjian网站上亲自测试可用...