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

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。