layer弹出子iframe层父子页面传值的实现方法

网络编程 2025/1/7 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

本文介绍了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">

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

                                
                                
                                    iframe父子页面传值,iframe,父子传值,iframe传值 
                                
                                    标签：
                                        iframe父子页面传值,iframe,父子传值,iframe传值
                                     

                                蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

评论“layer弹出子iframe层父子页面传值的实现方法”

暂无layer弹出子iframe层父子页面传值的实现方法的评论...

www.hbtsch.com 蝙蝠岛资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2025年01月07日

layer弹出子iframe层父子页面传值的实现方法

iframe父子页面传值,iframe,父子传值,iframe传值

微信小程序功能之全屏滚动效果的实现代码

js操作table中tr的顺序实现上移下移一行的效果

评论“layer弹出子iframe层父子页面传值的实现方法”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接