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

小灰灰 2022-12-03 15:44 200阅读 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.效果图
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2NjU3_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2NjU3_size_16_color_FFFFFF_t_70]: /images/20221123/95bf6eace5e94686978211c29f111e0d.png