【Jquery】------ JS 实现子级页面调用父级页面中的函数方法及（父级页面调用子级页面中的函数方法）代码示例

皮皮冰要做大神

已于 2022-02-16 13:28:47 修改

阅读量2.6k

点赞数

分类专栏： # JavaScript # Jquery 文章标签： javascript jquery iframe 父子级页面函数调用

于 2020-09-04 09:53:22 首次发布

本文链接：https://blog.csdn.net/qq_38366657/article/details/108398193

版权

JavaScript 同时被 2 个专栏收录

59 篇文章 2 订阅

订阅专栏

Jquery

16 篇文章 0 订阅

订阅专栏

1.父级页面index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
   
    </style>
   
</head>
<body>
    <div class="">
        <span>父级:</span> <input type="text" name="parentValue" id="parentValue">
    </div>
    <div class="" style="height: 40px;"></div>
    <div class="">
       <span>子级:</span> <iframe src="index_t.html" height="400px" width="450px"></iframe>
    </div>

    <script src="./jquery-3.3.1.min.js"></script>
    <script>

        $(document).ready(function(){
            
            //父级 window 对象为浏览器端口对象 它也是当前页面的顶层对象，
            //即最高一层的对象，所有其他对象都是它的下属
            //对window 对象 创建一个方法 由子级页面调取该方法
            window.fn_input_set_value=function(value){
                $("#parentValue").val(value);
            }
            
            //由父级调取子级方法 进行赋值
            $("#parentValue").change(function(){
                window.fn_parent_input_set_value($(this).val());
            })
        })

    </script>
</body>
</html>

2.子级index_t.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
   
    </style>
   
</head>
<body>
    <div class="">
         <input type="text" name="childValue" id="childValue">
    </div>

    <script src="./jquery-3.3.1.min.js"></script>
    <script>

        $(document).ready(function(){
            //当子级的文本框值改变 调取父级方法对父级文本框赋值
            $("#childValue").change(function(){
                var value=$(this).val();
                //判断是否父级有此方法
                if( window.parent.fn_input_set_value){
                    //调取父级方法进行赋值
                    window.parent.fn_input_set_value(value);
                }
            })
            
            //由父级调取子级的方法进行赋值
            window.parent.fn_parent_input_set_value=function(value){
                $("#childValue").val(value);
            }

        })

    </script>
</body>
</html>

3.效果图

皮皮冰要做大神

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Jquery】------ JS 实现子级页面调用父级页面中的函数方法及（父级页面调用子级页面中的函数方法）代码示例

1.父级页面index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .
复制链接

扫一扫