JS 封裝父頁(yè)面子頁(yè)面交互接口的實(shí)例代碼
更新時(shí)間：2019年06月25日 14:53:57 作者：小酋長(zhǎng)
這篇文章主要介紹了js 封裝父頁(yè)面子頁(yè)面交互接口的實(shí)例代碼，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
定義標(biāo)準(zhǔn)接口
Interface= {};
Interface.ParentWin = {};
Interface.ChildWin = {};
/**
* 父頁(yè)面提供的標(biāo)準(zhǔn)接口函數(shù)名稱
*/
Interface.ParentWin.funName = {
getDataFun: "getDataFun", //子頁(yè)面調(diào)用，提供給子頁(yè)面的數(shù)據(jù)接口
updateDataFun: "updateDataFun", //子頁(yè)面調(diào)用，向父頁(yè)面提交數(shù)據(jù)接口
closeFun: "closeFun" //子頁(yè)面需要關(guān)閉時(shí)，調(diào)用父頁(yè)面的關(guān)閉窗口接口
}
/**
* 父頁(yè)面設(shè)置需要提供給子頁(yè)面的接口函數(shù)
* @param childWinId ：要使用的子頁(yè)面對(duì)應(yīng)接口的id，該id需要與子頁(yè)面中定義的id一致
* @param functionName ： 需要注冊(cè)的回調(diào)函數(shù)名稱，接口名稱只能是Interface.ParentWin.funName中定義的名稱
* @param callbackFun ：子頁(yè)面數(shù)據(jù)向父頁(yè)面更新數(shù)據(jù)時(shí)的回調(diào)函數(shù),接口入?yún)閖s對(duì)象
*/
Interface.ParentWin.setFunForChild = function(childWinId, functionName, callbackFun) {
if (comm.isEmpty(childWinId)) {
alert("沒(méi)有為子頁(yè)面調(diào)用接口定義對(duì)象Id");
return;
}
//保存父頁(yè)面提供給子頁(yè)面調(diào)用的接口總對(duì)象
if (comm.isEmpty(window.childCallbackObj)) {
window.childCallbackObj = {};
}
//與指定子頁(yè)面對(duì)應(yīng)的回調(diào)接口對(duì)象
var childCallbackObj = window.childCallbackObj;
if (comm.isEmpty(childCallbackObj[childWinId])) {
childCallbackObj[childWinId] = {};
}
var childObj = childCallbackObj[childWinId];
if (!comm.isEmpty(childObj[functionName])) {
alert("子頁(yè)面" + childWinId + " 所需調(diào)用接口已存在" + functionName);
return;
}
//檢查接口是否為注冊(cè)的接口
for (var pro in Interface.ParentWin.funName) {
if (Interface.ParentWin.funName[pro] == functionName) {
childObj[functionName] = callbackFun;
return;
}
}
alert("子頁(yè)面 " + childWinId + " 所需調(diào)用接口未注冊(cè)：" + functionName + "。請(qǐng)檢查接口定義聲明對(duì)象。");
}
/**
* 檢查指定的子頁(yè)面調(diào)用接口是否存在
*/
Interface.ChildWin.checkValid = function(childWinId, funName) {
var parentWin = window.parent;
var childCallbackObj = parentWin.childCallbackObj;
if (comm.isEmpty(childWinId)) {
alert("子頁(yè)面調(diào)用接口定義對(duì)象Id不能為空！");
return false;
}
if (comm.isEmpty(childCallbackObj)) {
alert("父頁(yè)面調(diào)用接口定義的對(duì)象不存在");
return false;
}
var childObj = childCallbackObj[childWinId];
if (comm.isEmpty(childObj)) {
alert("子頁(yè)面調(diào)用接口定義的對(duì)象不存在");
return false;
}
if (comm.isEmpty(childObj[funName])) {
alert("父頁(yè)面調(diào)用接口定義不存在:" + funName);
return false;
}
return true;
}
/**
* 子頁(yè)面調(diào)用父頁(yè)面的接口函數(shù)
* @childWinId ：子頁(yè)面定義的自身頁(yè)面Id
* @funcName ： 需要調(diào)用的回調(diào)函數(shù)名稱
* @params ： 需要傳遞的參數(shù)
* @return :如果函數(shù)有返回值則通過(guò)其進(jìn)行返回
*/
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>父頁(yè)面</title>
</head>
<body>
<script src="js/common.js"></script>
<script>
//傳給子頁(yè)面的值
Interface.ParentWin.setFunForChild("data", Interface.ParentWin.funName.getDataFun, function() {
return value;
});
//獲取子頁(yè)面函數(shù)并調(diào)用
window.fun;
Interface.ParentWin.setFunForChild("test",Interface.ParentWin.funName.updateDataFun,function(param){
fun = param;
});
//調(diào)用
var val = fun("1111");
console.log(val);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子頁(yè)面</title>
</head>
<body>
<script src="js/common.js"></script>
<script>
//父頁(yè)面?zhèn)魅霐?shù)據(jù)
var data = Interface.ChildWin.callBack("data", Interface.ParentWin.funName.getDataFun);
console.log(data);
//提供給父頁(yè)面調(diào)用的函數(shù)
Interface.ChildWin.callBack("test",Interface.ParentWin.funName.updateDataFun,function(data){
alert(data);
var str = "xxx";
return str;
});
</script>
</body>
</html>
總結(jié)
以上所述是小編給大家介紹的JS 封裝父頁(yè)面子頁(yè)面交互接口的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
JavaScript實(shí)現(xiàn)動(dòng)態(tài)表格效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)表格效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
接著（2）來(lái)講。筆記（2）已經(jīng)講了引用和函數(shù)重載，接下來(lái)講解作用域。2009-09-09
JavaScript 繼承 封裝 多態(tài)實(shí)現(xiàn)及原理詳解
這篇文章主要介紹了JavaScript 繼承 封裝 多態(tài)實(shí)現(xiàn)及原理詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
js簡(jiǎn)單實(shí)現(xiàn)根據(jù)身份證號(hào)碼識(shí)別性別年齡生日
根據(jù)身份證號(hào)碼識(shí)別性別年齡生日，目前就有一個(gè)這樣的需求，那么接下來(lái)為大家介紹下使用js是如何實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過(guò)2013-11-11
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)無(wú)縫輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
在網(wǎng)頁(yè)中使用document.write時(shí)遭遇的奇怪問(wèn)題
很多時(shí)候我們都會(huì)在網(wǎng)頁(yè)上的JavaScript中使用document.write來(lái)寫(xiě)入一些東西，有的時(shí)候可能因?yàn)槲覀儫o(wú)法改變某一部分HTML而不得不使用這樣的辦法，也有的時(shí)候是因?yàn)樵谶M(jìn)行跨應(yīng)用的腳本調(diào)用。
2010-08-08 
這篇文章主要介紹了微信小程序獲取當(dāng)前位置和城市名的思路,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-11-11 
使用JavaScript遍歷輸出頁(yè)面中的所有元素的方法詳解
在前端開(kāi)發(fā)中,遍歷頁(yè)面中的所有元素是一個(gè)常見(jiàn)需求,無(wú)論是調(diào)試、頁(yè)面分析,還是獲取元素信息,都會(huì)用到遍歷 DOM 樹(shù)的操作,本文將介紹如何通過(guò) JavaScript 編寫(xiě)一個(gè)方法,遍歷并輸出頁(yè)面中的所有元素,需要的朋友可以參考下
2024-12-12 
JavaScript報(bào)錯(cuò)：Uncaught TypeError: XXX is
在 JavaScript 編程中,“Uncaught TypeError: XYZ is not iterable” 是一種常見(jiàn)的錯(cuò)誤,這種錯(cuò)誤通常發(fā)生在試圖對(duì)一個(gè)非可迭代對(duì)象進(jìn)行迭代操作時(shí),了解這種錯(cuò)誤的成因和解決方法,對(duì)于編寫(xiě)健壯的代碼至關(guān)重要,需要的朋友可以參考下
2024-07-07