设为首页收藏本站
天气与日历 切换到窄版

 找回密码
 立即注册

QQ登录

只需一步，快速开始

限时开通VIP永久会员，可免费下载所有附件
帆帆资源网»首页 › 编程教程 › 编程教程 › 关于使用iframe的父子页面进行简单的相互传值 ...
返回列表 发新帖
查看: 516|回复: 0

[其它教程] 关于使用iframe的父子页面进行简单的相互传值

[复制链接]
帆帆资源网

3188

主题

4

回帖

3290

积分

管理员

积分
3290
发表于 2024-2-27 11:34:54 | 显示全部楼层 |阅读模式
关于使用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>
复制代码


页面, 数据, 面的, iframe, 获取

相关帖子

扫码关注微信公众号，及时获取最新资源信息！【下载附件优惠：VIP会员5折；永久VIP免费】
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

免责声明：
1、本站提供的所有资源仅供参考学习使用，版权归原著所有，禁止下载本站资源参与商业和非法行为，请在24小时之内自行删除！
2、本站所有内容均由互联网收集整理、网友上传，并且以计算机技术研究交流为目的，仅供大家参考、学习，请勿任何商业目的与商业用途。
3、若您需要商业运营或用于其他商业活动，请您购买正版授权并合法使用。
4、论坛的所有内容都不保证其准确性，完整性，有效性，由于源码具有复制性，一经售出，概不退换。阅读本站内容因误导等因素而造成的损失本站不承担连带责任。
5、用户使用本网站必须遵守适用的法律法规,对于用户违法使用本站非法运营而引起的一切责任，由用户自行承担
6、本站所有资源来自互联网转载，版权归原著所有，用户访问和使用本站的条件是必须接受本站“免责声明”，如果不遵守，请勿访问或使用本网站
7、本站使用者因为违反本声明的规定而触犯中华人民共和国法律的，一切后果自己负责，本站不承担任何责任。
8、凡以任何方式登陆本网站或直接、间接使用本网站资料者，视为自愿接受本网站声明的约束。
9、本站以《2013 中华人民共和国计算机软件保护条例》第二章 “软件著作权” 第十七条为原则：为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。若有学员需要商用本站资源，请务必联系版权方购买正版授权！
10、本网站如无意中侵犯了某个企业或个人的知识产权，请来信【站长信箱312337667@qq.com】告之，本站将立即删除。
郑重声明：
本站所有资源仅供用户本地电脑学习源代码的内含设计思想和原理，禁止任何其他用途！
本站所有资源、教程来自互联网转载，仅供学习交流，不得商业运营资源，不确保资源完整性，图片和资源仅供参考，不提供任何技术服务。
本站资源仅供本地编辑研究学习参考，禁止未经资源商正版授权参与任何商业行为，违法行为！如需商业请购买各资源商正版授权
本站仅收集资源，提供用户自学研究使用，本站不存在私自接受协助用户架设游戏或资源，非法运营资源行为。
快速回复 返回顶部 返回列表