layer弹出子iframe层父子页面传值的实现方法
(编辑：jimmy 日期: 2025/3/6 浏览：3 次 )
本文介绍了layer弹出子iframe层父子页面传值的实现方法，分享给大家，具体如下：
父页面获取子页面元素
格式：
$("#iframeID").contents().find("#eleID")
示例代码：
father.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父级页面</title> <script src="/UploadFiles/2021-04-02/jquery-2.2.4.min.js">son.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子级页面</title> <script src="/UploadFiles/2021-04-02/jquery-2.2.4.min.js">父页面调用子页面方法
格式：
$("#iframeID")[0].contentWindow.fun()参数：fun()为子页面的函数
注意：$("#iframeID")[0]后面这个[0]必须要，亲测，删除就报错了，其原因是contentWindow是原生js的方法，所以用.eq(0)都不行。
示例代码：
father.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父级页面</title> <script src="/UploadFiles/2021-04-02/jquery-2.2.4.min.js">son.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子级页面</title> <script src="/UploadFiles/2021-04-02/jquery-2.2.4.min.js">子页面获取父页面元素
格式：
$("#fatherID",window.parent.document)参数：fun()为子页面的函数
示例代码：
father.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父级页面</title> </head> <body> <div id="father_dataChange">我是父页面内容，点击“子向父传值”按钮我改变</div> <iframe src="/UploadFiles/2021-04-02/son.html">son.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子级页面</title> <script src="/UploadFiles/2021-04-02/jquery-2.2.4.min.js">子页面调用父页面方法
格式：
parent.ele
参数：fun()为子页面的函数
示例代码：
father.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父级页面</title> </head> <body> <iframe src="/UploadFiles/2021-04-02/son.html">son.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子级页面</title> <script src="/UploadFiles/2021-04-02/jquery-2.2.4.min.js">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
上一篇：微信小程序功能之全屏滚动效果的实现代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父级页面</title> <script src="/UploadFiles/2021-04-02/jquery-2.2.4.min.js">son.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子级页面</title> <script src="/UploadFiles/2021-04-02/jquery-2.2.4.min.js">以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：js操作table中tr的顺序实现上移下移一行的效果
高通和谷歌日前宣布，推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中，全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前，搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世，有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示，此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。