zoukankan      html  css  js  c++  java
  • layer回调函数

    获取本弹出层的值,如果弹出层内容不包含页面,则直接用this获取,如下例中的alert(this.content);alert(this.yes);alert(this.title);alert(index);alert(this.offset);等,

    如果弹出层内容包含其他网页,则需要通过layero参数获取该其他网页的元素内容:

    例如:获取该其他页面中id为jqGridY的DIV元素:

    $(layero).find('iframe').contents().find('#jqGridY');
    即:$(layero).find('iframe').contents().find('#id');

    或:
    var body = layer.getChildFrame('body', index);
    body.find('input').val('Hi,我是从父页来的');
    console.log(body.html())

    获取该其他页面的window对象:
    $(layero).find('iframe')[0].contentWindow
    //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();即JS方法;
    或:
    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();

     那么,如何在弹出层中获取父页面元素呢

     

    layer.open({
    title:"dfsdfdf",
    content: '测试回调',
    yes: function(index, layero){
    //do something
    alert(index);

    alert(this.title);

    alert(this.content);

    alert(this.yes);

    alert(this.fixed);

    alert(this.offset);

    //layer.close(index); //如果设定了yes回调,需进行手工关闭
    }
    });

    【layui】【jquery】通过layero获取iframe的元素

      $(layero).find('iframe').contents().find('#id');
    $(layero).find('iframe').contents().find('#jqGridY');


    获取window对象
    $(layero).find('iframe')[0].contentWindow

    //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();
    1. var form = $(layero).find("iframe").contents().find("#file-form");//获取子页面元素
       

      layer.getChildFrame(selector, index) - 获取iframe页的DOM

      当你试图在当前页获取iframe页的DOM元素时,你可以用此方法。selector即iframe页的选择器

      layer.open({
      type: 2,
      content: 'test/iframe.html',
      success: function(layero, index){
      var body = layer.getChildFrame('body', index);
      var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();
      console.log(body.html()) //得到iframe页的body内容
      body.find('input').val('Hi,我是从父页来的')
      }
      });

      通过layer弹出的ifram。想要获取里面的元素并且绑定相应的事件。

      以前一直不知道layero是什么意思。

      可以通过下面的代码自己体会一下

        1. layer.open({
        2.  
          type: 2,
        3.  
              title: '文件管理',
        4.  
              shadeClose: true,
        5.  
              shade: 0.8,
        6.  
              area: ['70%', '60%'],
        7.  
              content: url+"?path="+path //iframe的url
        8.  
              ,btn: ['确定', '全选', '反选','重置']
        9.  
          ,btn2: function(index, layero){
        10.  
                //按钮【按钮二】的回调
        11.  
                var form = $(layero).find("iframe").contents().find("#file-form");//获取子页面元素
        12.  
                //使用#id就可以获取到弹出层里面的子元素。前面的写法都是固定的。
        13.  
          form.find(":checkbox").prop("checked", true);
        14.  
           
        15.  
                return false //开启该代码可禁止点击该按钮关闭
        16.  
              }
        17.  
           
        18.  
          });

        当layer以iframe层的方式弹出新的窗口(子页面),如何在子页面中访问父页面的元素和函数。

        1、访问父页面元素值

        1
        var parentId=parent.$("#id").val();//访问父页面元素值

        2、访问父页面方法

        1
        var parentMethodValue=parent.getMethodValue();//访问父页面方法

        3、如何关闭弹出的子页面窗口

        1
        2
        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
        parent.layer.close(index);//关闭弹出的子页面窗口

        4、如何从子页面执行刷新父页面操作

        1
        parent.location.reload(); // 父页面刷新

        附:layer弹出多个iframe找到父页面的方法

        父页面:

        function aa(){
        var index = parent.layer.getFrameIndex(window.name);
        var iframeName = 'layui-layer-iframe'+index;
        openDialog1('选择XXX', '${ctx}/*****,'800px', '500px',iframeName);
        }
        function openDialog1(title,url,width,height,target){
        top.layer.open({
        type: 2,
        area: [width, height],
        title: title,
        maxmin: true, //开启最大化最小化按钮
        content: url ,
        btn: ['确定', '关闭'],
        yes: function(index, layero){
        var body = top.layer.getChildFrame('body', index);
        var iframeWin = layero.find('iframe')[0]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();
        var inputForm = body.find('#inputForm');
        var top_iframe;
        if(target){
        top_iframe = target;//如果指定了iframe,则在改frame中跳转
        }else{
        top_iframe = top.getActiveTab().attr("name");//获取当前active的tab的iframe
        }
        inputForm.attr("target",top_iframe);//表单提交成功后,从服务器返回的url在当前tab中展示
        if(iframeWin.contentWindow.doSubmit(top_iframe) ){
        top.layer.close(index);//关闭对话框。
        top.window[iframeName].frames.location.reload();//刷新父亲
        }
        },
        cancel: function(index){
        }
        });
        }
        //子页面回调方法
        function addRecord(name,chainName){
        alert(name);
        }

         子页面

        function doSubmit(iframeName) {
        var sel=$("tbody tr td input.i-checks:checked");
        var size = sel.size();
        if(size==0){
        top.layer.alert('请至少选择一条数据!', {icon: 0, title:'警告'});
        return false;
        }else{
        for(var i=0;i<size;i++){
        top.window[iframeName].addRecord(sel[i].name,sel[i].value);
        }
        return true;
        }
        }

        自己总结的一个很好的例子:


        layer.open({
        type: 1,
        area: ['600px', '360px'],
        shadeClose: true, //点击遮罩关闭
        content: '<div id="aaa" style="padding:20px;">自定义内容</div>',
        success: function(layero, index){
        alert(layero.find("#aaa").text());
        }

        });

      layer.getFrameIndex(windowName) - 获取特定iframe层的索引

       layer.getFrameIndex(windowName) - 获取特定iframe层的索引

       此方法一般用于在iframe页关闭自身时用到。

      //假设这是iframe页
      var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

       

      parent.layer.close(index); //再执行关闭

       layer.getFrameIndex(windowName) - 获取特定iframe层的索引

     layer.getFrameIndex(windowName) - 获取特定iframe层的索引

     此方法一般用于在iframe页关闭自身时用到。

    1
    2
    3
    //假设这是iframe页
    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
    parent.layer.close(index); //再执行关闭
    逆天改命!我命由我不由天!
  • 相关阅读:
    用jmeter进行多用户并发压力测试
    Jmeter使用流程及简单分析监控
    检查点--JMeter也有之二“检查点”
    浅谈如何做好Bug回归验证?
    手机APP测试技术-整体测试流程框架
    常用的sql语句
    Jmeter实时性能测试数据的监控
    Jmeter插件之PerfMon监控插件使用说明
    Requests: 让 HTTP 服务人类
    安装mysql数据库图文教程
  • 原文地址:https://www.cnblogs.com/huhewei/p/13951411.html
Copyright © 2011-2022 走看看