本文介绍在frameset布局中实现右下角消息提醒的方法。通过将消息图标置于左侧导航，利用window.parent跨框架调用主框架函数，结合jQuery的messager插件控制弹窗样式与动画，实现兼容IE8及Chrome的消息提示功能。
frameset框架弹出层实现方案
此前在开发项目时，涉及一个消息提醒功能。相信许多开发者都处理过类似需求，这里分享我在实现过程中遇到的问题及解决思路。
项目基础架构采用frameset框架，具体代码结构如下。
框架布局代码
<frameset name="myFrame" cols="85,*" frameborder="no" border="0" framespacing="0">
<frame src="${base}/left.jsp" name="leftFrame" frameborder="no" scrolling="auto" noresize="noresize"
id="leftFrame" />
<frame src="${base}/welcome.jsp" name="mainFrame" frameborder="no" scrolling="auto" noresize="noresize"
id="mainFrame" />
</frameset> 该布局将页面划分为左右两个区域。
需求是在任意页面点击消息图标时，于右下角弹出消息提示框。
此前未接触过此类场景，经查阅资料后，先确定了使用jquery的message插件，随后掌握了操作父框架的JS方法，最终解决了该问题。
由于left.jsp作为菜单导航页面保持固定不变，因此将消息图标放置在该页面中。
left.jsp页面中包含以下JS函数：
左侧消息触发函数
function openMsg(msgType){
//调用父窗体的获取消息js
window.parent.getMessage(msgType);
}这是在left页面中触发打开消息的JS函数，其中msgType参数用于标识消息状态。
window.parent用于返回父窗口对象。
注意：若当前窗口本身即为顶层窗口，parent属性返回对自身的引用。
在框架网页中，父窗口通常等同于顶层窗口；但若框架内部嵌套了其他框架，则父窗口与顶层窗口可能不一致。
利用上述方法，即可直接调用main框架中的getMessage()函数。
main框架中的getMessage()函数定义如下：
主框架消息处理函数
function getMessage(msgType){
/*$.messager.lays(width, height);
*该方法主要用来定义弹出窗口的宽度和高度。
*/
$.messager.lays(200, 150);
var msg="无消息"
if(msgType==1){
msg="jqueryMessage新消息提醒";
}else{
msg="jqueryMessage已提醒消息";
}
/*$.messager.show(title,text,time);
*该方法主要定义窗口显示的内容，以及窗口显示多长时间后进行隐藏。
*如果使用默认的标题，则将title设置为0，另外title和text还可以设置为html内容进行显示。如果希望用户点击弹窗的关闭按钮才关闭
*消息框，可将time设置为0。
*/
$.messager.show("消息提醒",msg);
}
</script> 此外还涉及$.messager.anim(type,speed)方法。
该方法用于定义窗口呈现的动画效果及速度。
$.messager.anim("fade",1000); //以fadeIn动画方式显示
$.messager.anim("show",1000); //以show动画方式显示
以上简要介绍了jquery的message插件中常用的几个方法。
使用前需在页面中引入jquery.js和jquery.messager.js文件。
通过上述组合，完成了整套功能实现。
此效果图在IE8下运行正常，且兼容谷歌浏览器。关于frameset弹出层效果的介绍到此结束，希望有所帮助！