详细信息 您现在的位置是:首页 > Layui

layui框架的layer弹出子iframe层父、子页面相互传值

来源:阿立 发布时间:2020-02-20 4357 人已围观

摘要layui框架的layer可以说是非常的方便,弹出iframe更是解决了网站制作时不少问题。那么父页面和子页面如何相互传值呢

父页面获取子页面元素

格式:$("#iframeID").contents().find("#eleID")

父页面调用子页面方法

格式:$("#iframeID")[0].contentWindow.fun()

参数:fun()为子页面的函数

注意:$("#iframeID")[0]后面这个[0]必须要,亲测,删除就报错了,其原因是contentWindow是原生js的方法,所以用.eq(0)都不行。

子页面获取父页面元素

格式:$("#fatherID",window.parent.document)

参数:fun()为子页面的函数

子页面调用父页面方法

格式:parent.ele

参数:fun()为子页面的函数

layer弹出iframe层

再通过这个id进行操作,操作方法和上面介绍的方法对应就可以,可是这种方法太繁琐,我又找了个更好的办法——利用layer的success回调函数:

layer.open({

  type: 2,

  title: '我是子iframe页面',

  shadeClose: true,

  shade: 0.8,

  area: ['380px', '90%'],

  content: './son.html',    //iframe的url

  success:function(dom){

    let $iframeDom=$(dom[0]).find("iframe").eq(0).contents();

    $iframeDom.find("#test").html("我是从父级传来的值哟……")

  }

}); 


上一篇: 返回列表

下一篇: layui动态表格显示图片

站点信息

  • 博主:小程
  • QQ:1697915848
  • 邮箱:1697915848@qq.com