热门标签
当前位置: article > 正文
iframe子父页面变量、标签、方法的调用_获取父页面变量
作者：煮酒与君饮 | 2024-08-18 13:19:01
赞
踩
获取父页面变量
iframe子父页面变量、标签、方法的调用
1.代码展示
父页面代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="${ctxPath}/static/js/jquery.min.js" ></script> </head> <div class="row"> <div class="col-sm-12"> <div class="ibox float-e-margins"> <div class="ibox-title"> <h5>管理</h5> </div> <div class="ibox-content"> <div class="row row-lg"> <div class="col-sm-12"> <div> <h3>我是父页面</h3> <p class="getVal"></p> <button id="btn1">直接子页面变量赋值</button> <button id="btn2">调用子页面方法传参</button> <button id="btn3">直接子页面标签赋值</button> <div class="page" style="display: none;"> <iframe id="childIframe" src="" width="100%" height="100%"></iframe> </div> <div > <h3>这是父页面</h3> <span id="domData"></span> </div> <script type="text/javascript"> //直接子页面变量赋值 点击事件 $("#btn1").click(function(){ //修改iframe 后进行切换页面 $(".page iframe").attr("src","/fdgk/aa"); //修改iframe并显示 console.log("---获取 iframe的标签元素", $("#childIframe")) console.log("---获取 iframe的标签元素", $("#childIframe").eq(0)) console.log("---获取 iframe的标签元素", $("#childIframe").eq(0)[0]) console.log("---获取 iframe的标签元素", $("#childIframe").eq(0)[0].contentWindow) //之所以用定时器，是修改iframe src 访问后台的调用方法的时候 iframe还没有更新完成 setTimeout(function(){ // //父页面调用子页面的变量进行赋值 $("#childIframe")[0].contentWindow.sunData="123"; $("#childIframe")[0].contentWindow.assignData(); },3000); $(".page").show(); }) //调用子页面方法传参 点击事件 $("#btn2").click(function(){ //修改iframe 后进行切换页面 $(".page iframe").attr("src","/fdgk/aa"); //修改iframe并显示 //父页面调用子页面的方法 setTimeout(function(){ // //父页面调用子页面的变量进行赋值 $("#childIframe").eq(0)[0].contentWindow.sunMethod("通过调用子页面方法传递的参数"); },3000); $(".page").show(); }) // 直接子页面标签赋值 点击事件 $("#btn3").click(function(){ //修改iframe 后进行切换页面 // $(".page iframe").attr("src","/fdgk/aa"); //修改iframe并显示 console.log("---获取 iframe的标签元素", $("#childIframe")) // //父页面给子页面的标签进行赋值 $('#childIframe').contents().find("#domData").text("直接标签赋值"); $(".page").show(); }) //父页面写好：子页面调用父页面的方法 function closeChild(value){ $(".page iframe").attr("src",""); $(".page").hide(); $(".getVal").text("父页面获取到了子页面传递的参数：'"+value+"'"); } //子页面调用父页面的变量 var data=""; function showData(){ alert(data) } </script> </div> </div> </div> </div> </div> </div> </div> <style> .dropdown-menu > li > a { width: 90%; } .css_iframe{ width: 100%; border: 0; height: 100%; min-height: 700px; } .tabs-container .nav-tabs{ border-bottom: 1px solid #202dbb; } </style> <script> </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
子页面代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="${ctxPath}/static/js/jquery.min.js" ></script> </head> <body> <h3>我是子页面</h3> <p>子页面的值为：<span class="val">2020-12-22 这是我的秘密！</span></p> <div > <h3>子页面展示父页面的数据</h3> <p>父页面调用子页面方法传递的参数是：<span class="methodParams">还没有传递参数</span></p> <p>父页面调用子页面的变量：<span class="constData">还没有传递参数</span></p> <p>父页面调用子页面的变量：<span id="domData">还没有传递参数</span></p> </div> <button id="btns1">调用父页面的方法 关闭iframe</button> <button id="btns2">赋值父页面的变量，并弹框显示</button> <button id="btns3">操作父页面的dom节点，修改span内容</button> <script type="text/javascript"> // 调用父页面上的方法 进行关闭页面 //调用方法 $("#btns1").click(function(){ //子页面通过parent获取调用父级的方法，也可以传参！ //closeChild 是父页面的方法 parent.closeChild($(".val").text()); }) //直接给父页面的变量进行赋值 $("#btns2").click(function(){ alert("btns2") //子页面通过parent获取调用父级的方法，也可以传参！ parent.data="变量赋值" ; parent.showData(); }) //直接给父页面的变量进行赋值 $("#btns3").click(function(){ alert("btns3") //子页面通过parent获取调用父级的方法，也可以传参！ parent.$("#domData").text("修改父页面标签") }) /********************************************************************/ function sunMethod(data){ $(".methodParams").text(data) console.log("父页面调用子页面方法 传递的参数",data) } var sunData="" function assignData(){ $(".constData").text(sunData) console.log("父页面直接给修改子页面的变量",sunData) } </script> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
2.父页面调用子页面
1.父页面调用子页面的变量
$("#childIframe")[0].contentWindow.sunData="123";
- 1
2.父页面调用子页面方法
$("#childIframe").eq(0)[0].contentWindow.sunMethod("通过调用子页面方法传递的参数");
- 1
3.父页面调用子页面的标签
$('#childIframe').contents().find("#domData").text("直接标签赋值");
- 1
3.子页面调用父页面
1.子页面调用父页面的变量
parent.data="变量赋值" ;
- 1
2.子页面调用父页面方法
parent.closeChild("方法参数");
- 1
3.子页面调用父页面的标签
parent.$("#domData").text("修改父页面标签")
- 1
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/煮酒与君饮/article/detail/997610
推荐阅读
相关标签
