獲取layer.open彈出層的返回值方法
更新時(shí)間：2018年08月20日 10:22:46 作者：zhangfj
今天小編就為大家分享一篇獲取layer.open彈出層的返回值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
正在開發(fā)的車聯(lián)網(wǎng)項(xiàng)目用到了layer API。當(dāng)我在開發(fā)“新建電子圍欄”的時(shí)候需要彈出地圖，用戶在地圖中畫一個(gè)區(qū)域，最后將這個(gè)彈出層的數(shù)據(jù)返回給原頁面。下面是我的實(shí)現(xiàn)過：程：
觸發(fā)彈出層的代碼：
layer.open({
type: 2,
title: "設(shè)置圍欄",
shadeClose: true,
shade: 0.4,
area: ['90%', '90%'],
content: "/ElectronicFence/Map?id=" + id + "&shapeType=" + shapeType,
btn: ['確定','關(guān)閉'],
yes: function(index){
//當(dāng)點(diǎn)擊‘確定'按鈕的時(shí)候，獲取彈出層返回的值
var res = window["layui-layer-iframe" + index].callbackdata();
//打印返回的值，看是否有我們想返回的值。
console.log(res);
//最后關(guān)閉彈出層
layer.close(index);
},
cancel: function(){
//右上角關(guān)閉回調(diào)
}
});
注意：
var res = window["layui-layer-iframe" + index].callbackdata();
這行代碼中‘callbackdata'是彈出層里面定義的函數(shù)。也許我們知道了什么！這個(gè)函數(shù)的作用就是返回值。
彈出層中定義返回值的函數(shù)：
<script type="text/javascript">
var map = new AMap.Map("container", {
resizeEnable: true
});
//在地圖中添加MouseTool插件
var mouseTool = new AMap.MouseTool(map);
AMap.event.addDomListener(document.getElementById('point'), 'click', function () {
mouseTool.marker({ offset: new AMap.Pixel(-14, -11) });
}, false);
AMap.event.addDomListener(document.getElementById('line'), 'click', function () {
mouseTool.polyline();
}, false);
AMap.event.addDomListener(document.getElementById('polygon'), 'click', function () {
mouseTool.polygon();
}, false);
var callbackdata = function () {
var data = {
username: 'zhangfj'
};
return data;
}
</script>
上面的代碼就是彈出層里面的JavaScript代碼，里面定義了函數(shù)'callbackdata' 用來返回值給調(diào)用彈出層的頁面。
當(dāng)我們點(diǎn)擊彈出層的“確定”按鈕的時(shí)候，就可以通過'callbackdata'函數(shù)獲取彈出層的返回值：
F12 查看console.log(res);的輸出結(jié)果：
以上這篇獲取layer.open彈出層的返回值方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
11個(gè)ES13中令人驚嘆的JavaScript新特性總結(jié)
與許多其他編程語言一樣,JavaScript?也在不斷發(fā)展,小編今天就為大家介紹ES13中添加的最新功能,并查看其用法示例以更好地理解它們,有需要的小伙伴可以了解下2023-09-09
vue渲染大量數(shù)據(jù)時(shí)卡頓卡死解決方法
這篇文章主要介紹了vue渲染大量數(shù)據(jù)時(shí)發(fā)生卡頓卡死問題時(shí)的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了javascript 單例模式詳解及簡單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了JS截取與分割字符串常用技巧,以實(shí)例形式分析你了JavaScript針對(duì)字符串的截取與分割常用函數(shù)的定義、功能及使用技巧,并補(bǔ)充分析了substr和substring方法的區(qū)別,需要的朋友可以參考下2015-11-11
RegExp對(duì)象是原生JavaScript中表示正則表達(dá)式的對(duì)象。接下來通過本文給大家詳細(xì)介紹javascript regexp對(duì)象知識(shí)，需要的的朋友參考下吧2017-02-02
按位“異或”運(yùn)算符 (^)是對(duì)兩個(gè)表達(dá)式執(zhí)行按位異或，下面為大家介紹下其具體的使用方法2014-03-03
70+漂亮且極具親和力的導(dǎo)航菜單設(shè)計(jì)國外網(wǎng)站推薦
網(wǎng)站可用性是任何網(wǎng)站的基本要素，而可用的導(dǎo)航更是網(wǎng)站所必需的要素之一。導(dǎo)航?jīng)Q定了用戶如何與網(wǎng)站進(jìn)行交互。如果沒有了可用的導(dǎo)航，那么網(wǎng)站內(nèi)容就會(huì)變得毫無用處。2011-09-09
Perl Substr()函數(shù)及函數(shù)的應(yīng)用
這篇文章主要介紹了Perl Substr()函數(shù)及函數(shù)的應(yīng)用,需要的朋友可以參考下2015-12-12
JavaScript實(shí)現(xiàn)手寫call/apply/bind的示例代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)手寫call/apply/bind的方法，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JavaScript有一定的幫助，需要的可以參考一下2023-02-02
JavaScript數(shù)組排序功能簡單實(shí)現(xiàn)
這篇文章主要介紹了JavaScript數(shù)組排序功能簡單實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05