欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

layui的iframe父子操作方法

程序员文章站 2022-03-26 21:25:49
背景:layui 通过调用 open方法,type:2,打开iframe弹窗 注意:以下方法使用需在服务上运行,否则会出现以下报错,导致方法失效 需求1:点击关闭弹窗时,父页面获取弹窗内的dom元素 1 //在关闭弹窗时,获取弹窗内的dom元素 2 cancel: function (index, ......

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

  

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

 

layui的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);