使用js callback机制实现调用页面局部刷新

web前端|js教程

js页面刷新

web前端-js教程

需求描述：审批表单页面由我的待办工作中打开，办理完毕后希望关闭该页面并且实现我待办表格的实时刷新;同时该需求也同样适用于从某些工作流管理模块中需要发起审批的情况，比如招聘需求模块中发起录用流程;我的绩效管理中审批绩效等。

jeewx2.0 源码,ubuntu启动附加驱动,如何配置tomcat9,半透明爬虫,php 8.0 和8.1,seo关键词怎么上百度首页lzw

直播声效软件 c 源码,ubuntu 网络巨型帧,tomcat设置f5ip,彩铅爬虫教程,php课程学习网站技术教程,金华seo监控lzw

我们先来看看之前的实现，该逻辑实现的功能是，从我待办列表中发起审批，审批结束后直接在当前页面，也就是审批页面跳转至一个新的oa主页面，并且打开我的工作-我待办的页签，实现方法如下：

mp4v2源码下载,swap扩容ubuntu界面,查看tomcat连接池,爬虫基础实例,php框架学习外包技术,sigug seolzw

$("#but_back").bind("click", function() { window.top.opener=null; var url = window.location.href; var isoa=url.indexOf(\); //var isoatest=url.indexOf(\); var curWwwPath=window.document.location.href;var pathName=window.document.location.pathname;var pos=curWwwPath.indexOf(pathName);var localhostPaht=curWwwPath.substring(0,pos);var projectName=pathName.substring(0,pathName.substr(1).indexOf(/)+1); if(isoa>0){ window.top.open(localhostPaht+/main/index.action?tableName=mywork,\_self); }else{ window.top.open(localhostPaht+projectName+/main/index.action?tableName=mywork,\_self); }});

桌面js的处理逻辑：

$(document).ready(function($){// 初始化图标initModules(initMenus()); refixAppPos();// 注册事件regClick(); sortable(); initIcoRemove(); initAppManager();//解析当前URL判断是否需要跳转制定TablegotoTable(); }); //跳转制定Table function gotoTable(){var tableName = request("tableName");if(""!=tableName&&null!=tableName&&undefined!=tableName){ openUrl($("#desktop_content_icon_"+tableName));} }

以上方法虽然实现了办理结束后跳至我的待办的功能，但有以下缺陷：

跳转是在新页面中，并非在调用页面，这样就形成了调用和跳转页面两个相同的桌面;

新的页面并非与原调用页面完全一致，调用页面如打开多个页签，新打开的页面相当于将除我的待办外的其他页签关闭，并不符合用户的需求;

用户体验不友好

我们使用js callback的实现如下，当前页面的调用页面非空且未关闭时，我们就直接调用页面中的js方法实现其局部的刷新。

/** 刷新父窗口关闭弹出窗口 */function refreshAndClose(){ var jscallback = $.trim($("#jscallback").val()); var type = $.trim($("#type").val()); if (window.opener && !window.opener.closed && jscallback!=null && jscallback!="") { if(!type){ //本页面的调用页面执行其嵌入或调用的js方法 eval("window.opener."+jscallback+"();"); } window.close();//当前页面关闭 } else { window.top.opener=null; var url = window.location.href; var isoa=url.indexOf(\); var curWwwPath=window.document.location.href; var pathName=window.document.location.pathname; var pos=curWwwPath.indexOf(pathName); var localhostPaht=curWwwPath.substring(0,pos); var projectName=pathName.substring(0,pathName.substr(1).indexOf(/)+1); if(isoa>0){ window.top.open(localhostPaht+/main/index.action?tableName=mywork,\_self); }else{ window.top.open(localhostPaht+projectName+/main/index.action?tableName=mywork,\_self); } }}

调用页面js：grid即为需要局部刷新的表格。

function openUrl(url){url=url+"&jscallback=callsus"window.open(url,\_blank); } function callsus(){$(#performanceDataGrid).reload(); }

通过js callback实现了调用页面的局部刷新，并对其他应用的类似功能具有一定的指导和参考意义。

更多使用js callback机制实现调用页面局部刷新相关文章请关注PHP中文网！