layer弹出子iframe层父子页面传值

父页面获取子页面元素

• 格式：
  $("#iframeID").contents().find("#eleID")
• 示例代码：
  father.html

    
    
    
    



    父向子传值

son.html

    
    
    


我是子页面内容，点击“父向子传值”按钮我改变

---

父页面调用子页面方法

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

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

• 示例代码：
  father.html

    
    
    
    



    父调子函数

son.html

    
    
    


我是子页面内容，点击“父调子函数”按钮我改变

---

子页面获取父页面元素

• 格式：
  $("#fatherID",window.parent.document)
  参数：fun()为子页面的函数
• 示例代码：
  father.html

    
    


我是父页面内容，点击“子向父传值”按钮我改变

son.html

    
    
    
    



    子向父传值

---

子页面调用父页面方法

• 格式：
  parent.ele
  参数：fun()为子页面的函数
• 示例代码：
  father.html

son.html

    
    
    
    



    点我后记得看控制台哟

layer弹出iframe层

layer弹出iframe层，其他都差不多，主要是如何找到iframe，先看下一般的layer调用iframe弹框代码：

layer.open({
  type: 2,
  title: '我是子iframe页面',
  shadeClose: true,
  shade: 0.8,
  area: ['380px', '90%'],
  content: './son.html'    //iframe的url
}); 

于是我就想给这个iframe弹框设置一个id，

layer.open({
  id:"son",
  type: 2,
  title: '我是子iframe页面',
  shadeClose: true,
  shade: 0.8,
  area: ['380px', '90%'],
  content: './son.html'    //iframe的url
}); 

再通过这个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("我是从父级传来的值哟……")
  }
}); 

• 示例代码：
  father.html

    
    
    
    
    



    layer弹出iframe层

son.html

好了，希望对大家有用，觉得有用，也请关注我或者点个赞哟~