扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >layer如何实现弹出子iframe层父子页面传值
  • 446

0
分享到

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

2024-04-02 19:04:59 446人浏览 独家记忆
摘要

这篇文章给大家分享的是有关layer如何实现弹出子iframe层父子页面传值的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。父页面获取子页面元素格式：$("#iframe

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

父页面获取子页面元素

格式：

$("#iframeID").contents().find("#eleID")

示例代码：

father.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父级页面</title>
  <script src="https://code.Jquery.com/jquery-2.2.4.min.js"></script>
  <style>
    .btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;background:darkturquoise;padding:5px 12px;color:#fff;cursor:pointer;margin-right:20px;}
  </style>
</head>
<body>
<div>
  <span id="father_dataChange" class="btn">父向子传值</span>
</div>
<iframe id="iframe_dataChange" src="son.html" frameborder="0"></iframe>
<script>
  $("#father_dataChange").click(function () {
   $("#iframe_dataChange").contents().find("#son_dataChange").html("我是父页面传过来的值……")
  })
</script>
</body>
</html>

son.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>子级页面</title>
  <script src="Https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<div id="son_dataChange">我是子页面内容，点击“父向子传值”按钮我改变</div>
</body>
</html>

父页面调用子页面方法

格式：

$("#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="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <style>
    .btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;background:darkturquoise;padding:5px 12px;color:#fff;cursor:pointer;margin-right:20px;}
  </style>
</head>
<body>
<div>
  <span id="father_fun" class="btn">父调子函数</span>
</div>
<iframe id="iframe_fun" src="son.html" frameborder="0"></iframe>
<script>
  $("#father_fun").click(function () {
   $("#iframe_fun")[0].contentWindow.son_fun()
  })
</script>
</body>
</html>

son.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>子级页面</title>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<div id="son_fun">我是子页面内容，点击“父调子函数”按钮我改变</div>
<script>
  function son_fun() {
   $("#son_fun").html("我变啦！啦啦啦……")
  }
</script>
</body>
</html>

子页面获取父页面元素

格式：

$("#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="son.html" frameborder="0"></iframe>
</body>
</html>

son.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>子级页面</title>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <style>
    .btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;background:darkturquoise;padding:5px 12px;color:#fff;cursor:pointer;margin-right:20px;}
  </style>
</head>
<body>
<div>
  <span id="son_dataChange" class="btn">子向父传值</span>
</div>
<script>
  $("#son_dataChange").click(function () {
   $("#father_dataChange",window.parent.document).html("变咯……");
  });
</script>
</body>
</html>

子页面调用父页面方法

格式：

parent.ele

参数：fun()为子页面的函数

示例代码：

father.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父级页面</title>
</head>
<body>
<iframe src="son.html" frameborder="0"></iframe>
<script>
  var ml_var="我是父级定义的变量";
  function ml() {
   alert("我被调用了！")
  }
</script>
</body>
</html>

son.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>子级页面</title>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <style>
    .btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;background:darkturquoise;padding:5px 12px;color:#fff;cursor:pointer;margin-right:20px;}
  </style>
</head>
<body>
<div>
  <span id="son_dataChange" class="btn">点我后记得看控制台哟</span>
</div>
<script>
  $("#son_dataChange").click(function () {
   console.log(parent.ml_var);
   parent.ml();
  });
</script>
</body>
</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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父级页面</title>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="layer.js"></script>
  <style>
    .btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;background:darkturquoise;padding:5px 12px;color:#fff;cursor:pointer;margin-right:20px;}
  </style>
</head>
<body>
<div>
  <span id="father_dataChange" class="btn">layer弹出iframe层</span>
</div>
<iframe id="iframe_dataChange" src="son.html" frameborder="0"></iframe>
<script>
 $("#father_dataChange").click(function () {
  layer.open({
   id:"son",
   type: 2,
   title: '我是子iframe页面',
   shadeClose: true,
   shade: 0.8,
   area: ['380px', '90%'],
   content: './son.html',
   success:function(dom){
    let $iframeDom=$(dom[0]).find("iframe").eq(0).contents();
    $iframeDom.find("#test").html("我是从父级传来的值哟……")
   }
  });
 })
</script>
</body>
</html>

son.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>子级页面</title>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<div id="test"></div>
</body>
</html>

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

--结束END--

本文标题: layer如何实现弹出子iframe层父子页面传值

本文链接: https://lsjlt.com/news/76213.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • layer如何实现弹出子iframe层父子页面传值
    这篇文章给大家分享的是有关layer如何实现弹出子iframe层父子页面传值的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。父页面获取子页面元素格式：$("#iframe...
    99+
    2024-04-02
  • jQuery中如何实现Layer弹出层传值到父页面
    这篇文章主要介绍jQuery中如何实现Layer弹出层传值到父页面，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！目前做的项目中用到layer弹层传值，弹层输入框输入文本，点击确定按钮...
    99+
    2024-04-02
  • 如何使用layer.open子页面弹出层向父页面传输数据
    这篇文章给大家分享的是有关如何使用layer.open子页面弹出层向父页面传输数据的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。子页面向父页面传数据...
    99+
    2024-04-02
  • layer如何实现关闭弹出层刷新父界面功能
    这篇文章主要介绍了layer如何实现关闭弹出层刷新父界面功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。具体如下：layer是一款近年来备...
    99+
    2024-04-02
  • 微信小程序中如何实现子页面向父页面传值
    这篇文章主要介绍微信小程序中如何实现子页面向父页面传值，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！微信小程序中子页面向父页面传值实例详解上面一张图是编辑款项页面，下面一张图是点击了...
    99+
    2024-04-02
  • layui type2如何通过url给iframe子页面传值
    这篇文章主要介绍了layui type2如何通过url给iframe子页面传值，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。A页面 调用la...
    99+
    2024-04-02
  • 如何实现layer弹出的iframe层在执行完毕后关闭当前弹出层
    这篇文章主要介绍如何实现layer弹出的iframe层在执行完毕后关闭当前弹出层，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！如下所示：这种弹出层在ajax执行完添加房间的动作后在回...
    99+
    2024-04-02
  • vue如何实现父子组件传值
    小编给大家分享一下vue如何实现父子组件传值，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！父子组件传值<!DOCTYPE&...
    99+
    2024-04-02
  • layui.layer弹出层(子页面)改变父页面内容（访问元素和函数）
    目录一、layer.open() 方法重要参数使用回顾content - 内容success - 层弹出后的成功回调方法yes - 确定按钮回调方法二、...
    99+
    2023-02-25
    layer弹出层改变父页面内容 layer子页面访问父页面元素和函数
  • Vue中如何实现父子组件传值
    Vue中如何实现父子组件传值，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。（一）传递数值1.子组件：Header.vue<templat...
    99+
    2024-04-02
  • Vue中父子组件如何实现传值
    目录前言一、将子组件引入父组件二、父组件如何传值给子组件三、子组件如何接收父组件传过来的值并使用(props)四、子组件如何传值给父组件($emit)五、父组件使用子组件传过来的值总...
    99+
    2023-01-28
    Vue父子组件 Vue组件传值 Vue父子组件传值
  • 如何解决layer弹出层自适应页面大小的问题
    这篇文章主要介绍了如何解决layer弹出层自适应页面大小的问题，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。网上的解决方案大都是以下几种：1...
    99+
    2024-04-02
  • vue如何实现子组件向父组件进行传值
    这篇文章主要为大家展示了“vue如何实现子组件向父组件进行传值”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue如何实现子组件向父组件进行传值”这篇文章吧。子组件向父组件进行传值：父组件内设置...
    99+
    2023-06-17
  • vue如何实现父组件向子组件进行传值
    这篇文章给大家分享的是有关vue如何实现父组件向子组件进行传值的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。父组件向子组件进行传值：在子组件绑定父的数据，子组件通过props接受参数。接下来我们通过一个例子，说明...
    99+
    2023-06-17
  • angular中如何实现子控制器向父控制器传值
    这篇文章将为大家详细讲解有关angular中如何实现子控制器向父控制器传值，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。如下所示：子级指令app-sheet中，使用she...
    99+
    2024-04-02
  • jQuery、layer如何实现弹出层的打开、关闭功能
    这篇文章主要介绍jQuery、layer如何实现弹出层的打开、关闭功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！打开弹出层：在list页面带入layer.js 在lis...
    99+
    2024-04-02
  • vue3父组件和子组件如何传值实例详解
    目录1.父组件打开子组件的的dialog组件 2.父组件关闭子组件的的dialog组件3.开始运用： 用户的增加修改操作1.父组件的修改 2.子组件的修改3.父组...
    99+
    2022-11-13
    vue3 父子组件传值 vue3子组件给父组件传值 vue3.0父子组件传值
  • ligerui如何实现子页面关闭后父页面刷新以及重新加载
    这篇文章主要介绍了ligerui如何实现子页面关闭后父页面刷新以及重新加载，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。1、需求在子页面处理...
    99+
    2024-04-02
  • 如何实现angularjs2中父子组件的数据传递
    这篇文章主要介绍如何实现angularjs2中父子组件的数据传递，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！父到子组件之间的数据传递父组件模板中引用子组件 // ...
    99+
    2024-04-02
  • JavaScript如何实现页面电子时钟
    这篇文章主要介绍了JavaScript如何实现页面电子时钟的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript如何实现页面电子时钟文章都会有所收获，下面我们一起来看看吧。题目：页面上有一个电子时钟...
    99+
    2023-07-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作