定義標準接口
Interface= {}; Interface.ParentWin = {}; Interface.ChildWin = {}; /** * 父頁面提供的標準接口函數名稱 */ Interface.ParentWin.funName = { getDataFun: "getDataFun", //子頁面調用，提供給子頁面的數據接口 updateDataFun: "updateDataFun", //子頁面調用，向父頁面提交數據接口 closeFun: "closeFun" //子頁面需要關閉時，調用父頁面的關閉窗口接口 } /** * 父頁面設置需要提供給子頁面的接口函數 * @param childWinId ：要使用的子頁面對應接口的id，該id需要與子頁面中定義的id一致 * @param functionName ： 需要注冊的回調函數名稱，接口名稱只能是Interface.ParentWin.funName中定義的名稱 * @param callbackFun ：子頁面數據向父頁面更新數據時的回調函數,接口入參為js對象 */ Interface.ParentWin.setFunForChild = function(childWinId, functionName, callbackFun) { if (comm.isEmpty(childWinId)) { alert("沒有為子頁面調用接口定義對象Id"); return; } //保存父頁面提供給子頁面調用的接口總對象 if (comm.isEmpty(window.childCallbackObj)) { window.childCallbackObj = {}; } //與指定子頁面對應的回調接口對象 var childCallbackObj = window.childCallbackObj; if (comm.isEmpty(childCallbackObj[childWinId])) { childCallbackObj[childWinId] = {}; } var childObj = childCallbackObj[childWinId]; if (!comm.isEmpty(childObj[functionName])) { alert("子頁面" + childWinId + " 所需調用接口已存在" + functionName); return; } //檢查接口是否為注冊的接口 for (var pro in Interface.ParentWin.funName) { if (Interface.ParentWin.funName[pro] == functionName) { childObj[functionName] = callbackFun; return; } } alert("子頁面 " + childWinId + " 所需調用接口未注冊：" + functionName + "。請檢查接口定義聲明對象。"); } /** * 檢查指定的子頁面調用接口是否存在 */ Interface.ChildWin.checkValid = function(childWinId, funName) { var parentWin = window.parent; var childCallbackObj = parentWin.childCallbackObj; if (comm.isEmpty(childWinId)) { alert("子頁面調用接口定義對象Id不能為空！"); return false; } if (comm.isEmpty(childCallbackObj)) { alert("父頁面調用接口定義的對象不存在"); return false; } var childObj = childCallbackObj[childWinId]; if (comm.isEmpty(childObj)) { alert("子頁面調用接口定義的對象不存在"); return false; } if (comm.isEmpty(childObj[funName])) { alert("父頁面調用接口定義不存在:" + funName); return false; } return true; } /** * 子頁面調用父頁面的接口函數 * @childWinId ：子頁面定義的自身頁面Id * @funcName ： 需要調用的回調函數名稱 * @params ： 需要傳遞的參數 * @return :如果函數有返回值則通過其進行返回 */ Interface.ChildWin.callBack = function(childWinId, funcName, params) { if (!Interface.ChildWin.checkValid(childWinId, funcName)) { return; } var parentWin = window.parent; var childObj = parentWin.childCallbackObj[childWinId]; return childObj[funcName].call(parentWin, params); }demo<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>父頁面</title> </head> <body> <script src="js/common.js"></script> <script> //傳給子頁面的值 Interface.ParentWin.setFunForChild("data", Interface.ParentWin.funName.getDataFun, function() { return value; }); //獲取子頁面函數并調用 window.fun; Interface.ParentWin.setFunForChild("test",Interface.ParentWin.funName.updateDataFun,function(param){ fun = param; }); //調用 var val = fun("1111"); console.log(val); </script> </body></html><!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>子頁面</title> </head> <body> <script src="js/common.js"></script> <script> //父頁面傳入數據 var data = Interface.ChildWin.callBack("data", Interface.ParentWin.funName.getDataFun); console.log(data); //提供給父頁面調用的函數 Interface.ChildWin.callBack("test",Interface.ParentWin.funName.updateDataFun,function(data){ alert(data); var str = "xxx"; return str; }); </script> </body></html>總結
以上所述是小編給大家介紹的JS 封裝父頁面子頁面交互接口的實例代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
