我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

layer如何实现弹出子iframe层父子页面传值

这篇文章给大家分享的是有关layer如何实现弹出子iframe层父子页面传值的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

创新互联是一家专业提供沽源企业网站建设,专注与成都做网站、网站制作、H5建站、小程序制作等业务。10年已为沽源众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

父页面获取子页面元素

格式:

$("#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




  
  子级页面
  




感谢各位的阅读!关于“layer如何实现弹出子iframe层父子页面传值”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


当前文章:layer如何实现弹出子iframe层父子页面传值
路径分享:http://shouzuofang.com/article/pdgejd.html

其他资讯