layui的iframe父子操作方法

By | 2020年4月19日

背景:layui 通过调用 open方法,type:2,打开iframe弹窗

  

  注意:以下方法使用需在服务上运行,否则会出现以下报错,导致方法失效

 

 

 

  需求1:点击关闭弹窗时,父页面获取弹窗内的dom元素

1 //在关闭弹窗时,获取弹窗内的dom元素
2 cancel: function (index, layero) {
3           var form = $(layero).find("iframe")    
4           [0].contentWindow.document.getElementById("dom元素id")
5           console.log(form)
6         }    

 

  需求2:在父页面调用弹窗内的的方法

1 // 点击关闭弹窗时,在回调函数中调用iframe内的方法
2 cancel: function (index, layero) {
3           window[layero.find('iframe')[0]['name']].test();
4         }

 

  需求3:在弹窗内调用父页面的方法

      注:此情况为调用的方法在layui.use内;如果方法暴露在外面,那么在弹窗内可通过 window.add(1,2) 调用

// 弹窗内调用父级页面内的方法

 // 父级页面的方法示例
layui.use(['jquery', 'layer'], function () {
      var $ = layui.$, //重点处
        layer = layui.layer;
      
      var add = function (x, y) {
        return x + y;
      }
      window.add = add;
    });


//弹窗内调用方法示例
window.parent.add(1,2);

 

请关注公众号获取更多资料

发表评论