iframe子父页面变量、标签、方法的调用

最新推荐文章于 2023-06-30 01:48:10 发布

weixin_38283640

最新推荐文章于 2023-06-30 01:48:10 发布

阅读量929

点赞数 1

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_38283640/article/details/127570344

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>

子页面代码

<!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>

2.父页面调用子页面

1.父页面调用子页面的变量

$("#childIframe")[0].contentWindow.sunData="123";

2.父页面调用子页面方法

$("#childIframe").eq(0)[0].contentWindow.sunMethod("通过调用子页面方法传递的参数");

3.父页面调用子页面的标签

 $('#childIframe').contents().find("#domData").text("直接标签赋值");

3.子页面调用父页面

1.子页面调用父页面的变量

 parent.data="变量赋值" ;

2.子页面调用父页面方法

parent.closeChild("方法参数");

3.子页面调用父页面的标签

 parent.$("#domData").text("修改父页面标签")

weixin_38283640

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe子父页面变量、标签、方法的调用

iframe子父页面变量、标签、方法的调用
复制链接

扫一扫

专栏目录

iframe子父页面变量、标签、方法的调用

iframe子父页面变量、标签、方法的调用

1.代码展示

2.父页面调用子页面

1.父页面调用子页面的变量

2.父页面调用子页面方法

3.父页面调用子页面的标签

3.子页面调用父页面

1.子页面调用父页面的变量

2.子页面调用父页面方法

3.子页面调用父页面的标签

“相关推荐”对你有帮助么？