快捷導(dǎo)航

獲取layer.open彈出層的返回值方法

更新時(shí)間：2018年08月20日 10:22:46 作者：zhangfj

今天小編就為大家分享一篇獲取layer.open彈出層的返回值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

正在開(kāi)發(fā)的車(chē)聯(lián)網(wǎng)項(xiàng)目用到了layer API。當(dāng)我在開(kāi)發(fā)“新建電子圍欄”的時(shí)候需要彈出地圖，用戶在地圖中畫(huà)一個(gè)區(qū)域，最后將這個(gè)彈出層的數(shù)據(jù)返回給原頁(yè)面。下面是我的實(shí)現(xiàn)過(guò)：程：

觸發(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' 用來(lái)返回值給調(diào)用彈出層的頁(yè)面。

當(dāng)我們點(diǎn)擊彈出層的“確定”按鈕的時(shí)候，就可以通過(guò)'callbackdata'函數(shù)獲取彈出層的返回值：

F12 查看console.log(res);的輸出結(jié)果：