JS frameset框架下弹出层实现方案

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弹出层效果的介绍到此结束，希望有所帮助！