依星源码资源网,依星资源网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

限时开通VIP永久会员,可免费下载所有附件
查看: 59|回复: 0

关于使用iframe的父子页面进行简单的相互传值

[复制链接] |主动推送

1686

主题

1721

帖子

2378

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2378
发表于 2023-12-21 16:14:08 | 显示全部楼层 |阅读模式
关于使用iframe的父子页面进行简单的相互传值

当一个页面使用了iframe作为嵌套时,如何想要将父页面的数据传给iframe子页面,那iframe所指向的呢个子页面是怎么获取呢,又或者子页面的数据要给父页面使用,那么父页面又如何获取子页面的数据呢?下面根据这种情况作了一个简单的demo案例:
父页面是parentPage.html,子页面是childPage.html。
1、情况一:父页面获取子页面传入的数据(子页面给父页面传值)
父页面:
  1. //获取子页面传入的数据
  2. function GetChildValue(obj){
  3.    document.getElementById('texts').innerText = obj;
  4. }
复制代码
子页面:
  1. //给父页面传数据
  2. var txt = '我是子界面主动传值给父界面的数值';
  3. parent.GetChildValue(txt); //GetValue是父界面的Js 方法
复制代码
2、情况二:子页面获取父页面的数据(父页面给子页面传值)
父页面:
  1. //给子页面传入数据
  2. function toChildValue(){
  3.     var txt = '这是父页面给子页面的数据';
  4.     return txt;
  5. }
复制代码
子页面:
  1. //获取父页面传来的数据
  2. var getParentVule = window.parent.toChildValue();
  3. console.log(getParentVule)
复制代码
具体传值的数据根据自己的项目要求修改,下面放上两个页面的完整代码:
父页面parentPage.htm
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>父页面</title>
  6.         <style type="text/css">
  7.             .box{
  8.                 width: 600px;
  9.                 height: 400px;
  10.                 margin: 10px auto;
  11.             }
  12.             h3{
  13.                 font-size: 16px;
  14.             }
  15.             .cont{
  16.                 width: 100%;
  17.             }
  18.             .cont h4{
  19.                 font-size: 14px;
  20.             }            
  21.             .cont #texts{
  22.                 width: 100%;
  23.                 line-height: 22px;
  24.                 font-size: 13px;
  25.                 color: #2E2D3C;
  26.             }
  27.             
  28.             iframe{
  29.                 /*只是隐藏,但任然保留DOM结构*/
  30.                 visibility: hidden;  
  31.             }
  32.         </style>
  33.     </head>
  34.     <body>
  35.         <div class="box">
  36.             <h3>这是父页面</h3>
  37.             <div class="cont">
  38.                 <h4>这是从子页面传入的数据:</h4>
  39.                 <div id="texts"></div>
  40.                 <iframe src="childPage.html" width="1px" height="1px" class="myIframe" name="myIframe"></iframe>
  41.             </div>
  42.         </div>
  43.         
  44.         
  45.         <script type="text/javascript">
  46.             //获取子页面传入的数据
  47.             function GetChildValue(obj){
  48.                 document.getElementById('texts').innerText = obj;
  49.             }
  50.             
  51.             //给子页面传入数据
  52.             function toChildValue(){
  53.                 var txt = '这是父页面给子页面的数据';
  54.                 return txt;
  55.             }
  56.         </script>
  57.     </body>
  58. </html>
复制代码
子页面childPage.html
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>子页面</title>
  6.         <style type="text/css">
  7.             .box{
  8.                 width: 600px;
  9.                 height: 400px;
  10.                 margin: 10px auto;
  11.             }
  12.             h3{
  13.                 font-size: 16px;
  14.             }
  15.         </style>
  16.     </head>
  17.     <body>
  18.         <div class="box">
  19.             <h3>这是子页面</h3>
  20.         </div>
  21.         
  22.         
  23.         <script type="text/javascript">
  24.             //给父页面传数据
  25.             var txt = '我是子界面主动传值给父界面的数值';
  26.             parent.GetChildValue(txt); //GetValue是父界面的Js 方法
  27.             
  28.             
  29.             //获取父页面传来的数据
  30.             var getParentVule = window.parent.toChildValue();
  31.             console.log(getParentVule)
  32.             
  33.         </script>
  34.     </body>
  35. </html>
复制代码


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

 
在线客服
点击这里给我发消息 点击这里给我发消息 点击这里给我发消息
售前咨询热线
312337667

微信扫一扫,私享最新原创实用干货

QQ|手机版|依星源码资源网 ( 鲁ICP备2021043233号-3 )|网站地图

GMT+8, 2024-2-23 01:17

Powered by Net188.com X3.4

邮箱:312337667@qq.com 客服QQ:312337667(工作时间:9:00~21:00)

快速回复 返回顶部 返回列表