溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了JS如何封裝父頁面子頁面交互接口，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
定義標準接口
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如何封裝父頁面子頁面交互接口”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
