2. 程式人生 > 實用技巧 >layer彈出子iframe層 父子頁面傳值的方法

layer彈出子iframe層 父子頁面傳值的方法

阿新 • • 發佈：2020-08-27

1.父頁面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>折扣管理</title>
        <link rel="icon" type="image/x-icon" href="../images/Strawberry.png"/>
        <link rel="stylesheet" type="text/css" href="../../../layui/css/layui.css"/>
        <link rel="
 
stylesheet" type="text/css" href="../css/index.css"/>
    </head>
    <body>
        <div class="topContent">
            <div class="title">折扣配置</div>
            <div id="fatherTest"></div>
            <div class="btn">新增折扣</div>
        </div>
        <div class
 
="content">
            
            <div class="form" id="form">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">城市大類</label>
                        <select
 
 name="city" lay-verify="">
                          <option value="">請選擇一個城市</option>
                          <option value="010">北京</option>
                          <option value="021">上海</option>
                          <option value="0571">杭州</option>
                        </select> 
                    </div>
                    <div class="layui-form-item">
                       <label class="layui-form-label">輸入框</label>
                       <div class="layui-input-block">
                          <input type="text" name="title" required  lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input">
                        </div>
                    </div>                      
                </form>
            </div>
        </div>
        <script src="../../../layui/layui.js"></script>
        <script src="../../../js/jquery-3.4.1.min.js"></script>
        <script type="text/javascript">
            layui.use('form', function(){
                  var form = layui.form;              
                //監聽提交
                  form.on('submit(formDemo)', function(data){
                    layer.msg(JSON.stringify(data.field));
                    return false;
                  });
                $('.btn').click(function(){
                    layer.open({
                        type: 2,//type: 2 為iframe層
                        title: '我是子頁面',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['60%', '50%'],
                        content: 'son.html' , //這裡content是一個URL，如果你不想讓iframe出現滾動條，你還可以content: ['http://sentsin.com', 'no']
                        btn: ['確定', '取消'] ,
                        yes:function(index,layero){
                           /*$(layero).find("iframe").eq(0).contents();多個iframe層使用才使用eq ,
                            * 需要先找到iframe,才能得到iframe裡面的其他元素來進行傳值取值
                            */
                           
                           //獲取子頁面元素 -- $("iframe").contents().find("子頁面id名")
                           var father = $(layero).find("iframe").contents();
                           
                           //找到父頁面中的第一個input傳給子頁面
                           var form = $('#form').find('input').eq(0).val();        
                           
                           father.find("#sonTest").html('父頁面選擇的值是---'+ form);
                           
                           //呼叫子頁面的方法 -- $('iframe')[0].contentWindow.方法名();
                           $('iframe')[0].contentWindow.funSon();
                        }
                    }); 
                
                })
            });
            function funFather(){                
                alert('我是父頁面的方法，我被呼叫了')
            }
            
        </script>
    </body>
</html>

2.子頁面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>新增折扣管理</title>
        <link rel="icon" type="image/x-icon" href="../images/Strawberry.png"/>
        <link rel="stylesheet" type="text/css" href="../../../layui/css/layui.css"/>
        <link rel="stylesheet" type="text/css" href="../css/index.css"/>
    </head>
    <body>
        <div class="topContent">
        </div>
        <div class="content">
            <div id="sonTest"></div>
            <div class="form" id="sonForm">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                       <label class="layui-form-label">輸入框</label>
                       <div class="layui-input-block">
                          <input type="text" name="title" required  lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                      <button id="define">點選傳給父頁面</button>
                </form>
            </div>
        </div>
        
        <script src="../../../layui/layui.js"></script>
        <script src="../../../js/jquery-3.4.1.min.js"></script>
        <script type="text/javascript">
            layui.use('form', function(){
              var form = layui.form;              
              //監聽提交
              form.on('submit(formDemo)', function(data){
                layer.msg(JSON.stringify(data.field));
                return false;
              });                    
                
            });
            $('#define').click(function(){
                var sonForm = $('#sonForm').find('input').val();

                //獲取父頁面元素 -- $("父頁面id名",window.parent.document)
                $("#fatherTest",window.parent.document).html('子頁面選擇的值是' + sonForm);

                //呼叫父頁面的方法 -- parent.方法名();
                parent.funFather(); 
            });
            function funSon(){
                alert('我是子頁面的方法，我被呼叫了')
            }
        </script>
    </body>
</html>

相關推薦

layer彈出子iframe層 父子頁面傳值的方法

1.父頁面 <!DOCTYPE html> <html> <head> <meta charset=\"UTF-8\"> <title>折扣管理</title>

Layer ----- 彈出層、彈框

模組載入名稱：layer，layer獨立元件官網：layer.layui.com layer可以獨立使用，也可以通過Layui模組化使用。按照實際需求來選擇。只使用layer，你可以去layer獨立元件官網下載元件包。你需要在你的頁面引入jQuery1.

jquery datagrid 引數及使用與layer彈出層

資料表格屬性（DataGrid Properties） 屬性繼承控制面板，以下是資料表格獨有的屬性。

vue 彈出遮罩層樣式例項

以前做遮罩層都是寫最小高度來佔滿屏，但是總會出現問題，也沒改變，今天一個人在交流群上問這個時，看到一個回答解決了我這一個bug，學到了，現在記錄一下樣式。

iframe父子頁面互相調取方法元素

父頁面 // parent.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />

layui type:2 iframe子頁面向父頁面傳值

（耗了我一天時間，我juo得可以記錄一下） 需求： 選擇子頁面表格中的radio或者雙擊該行，得到的改行資料傳到父頁面，由父頁面渲染。

layer彈出框外掛引數及方法介紹

layerui下載:http://www.layui.com 更多引數請閱讀開發文件：http://www.layui.com/doc/modules/layer.html

win10系統總彈出“explorer.exe沒有註冊類”的修復方法

好多朋友說win10系統開啟Edge瀏覽器等應用時會莫名其妙彈出explorer.exe殺的錯誤提示（如下圖所示），怎麼辦？為了幫助大家能夠更好的操作電腦，本文小編給大家講解win10彈出“explorer.exe沒有註冊類”提示框的解決

快速瞭解Vue父子元件傳值以及父調子方法、子調父方法

稍微總結了一下Vue中父子間傳值以及相互調方法的問題，非常基礎、希望可以幫到你！先來個最常用的，直接上程式碼：

Vue父子元件傳值以及父調子方法、子調父方法

1、父傳值給子元件 父元件： <template> <div> <p class=\"father\">父元件</p>

layui 解決如何從子頁面傳值回父頁面處理方法

前言 在WMS(ps:即倉儲管理系統)系統中，我們常會見這樣的一個場景： 當你選擇輸入客戶名稱的時候，它會彈出一個視窗，然後，在這個視窗中選擇或者查詢對應的客戶名稱。

vue頁面元件化-父子元件傳值

頁面元件化涉及到父子元件傳值的問題，需要用到props和emit 父元件引 <Dialog :dialogVisible=\"visible\"//需要向子元件傳值的屬性

react父子元件傳值之二，ref傳值(父元件呼叫子元件的值和方法) useRef+useImperativeHandle(hook)

父元件 import React, { useState, useRef, } from \'react\'; import Counter from \'./four\'; import CounterTwo from \'./five\';

vue中$emit的用法，父子元件傳值及頁面跳轉之間傳值

====== 一、父子元件傳值======== 1、父元件可以使用 props 把資料傳給子元件。2、子元件可以使用 $emit,讓父元件監聽到自定義事件 。

(二十一)父子元件傳值,子元件呼叫父元件事件

1：呼叫元件，並且通過自定義屬性向子元件傳入keywork，keywork1兩個值,傳Child事件

vue父子模板傳值問題解決方法案例分析

本文例項講述了vue父子模板傳值問題解決方法。分享給大家供大家參考，具體如下：

ASP.NET通過更改Url進行頁面傳值的實現程式碼

這裡，通過假資料，手動建立的一個類，然後建立的一個集合，放入下拉框，選好值以後，點確定

vue中父子元件傳值,解決鉤子函式mounted只執行一次的操作

因為mounted函式只會在html和模板渲染之後會載入一次，但是在子元件中只有第一次的資料顯示是正常的，所以需要再增加一個updated函式，在更新之後就可以重新進行取值載入，完成資料的正常顯示。

vue 元件間的通訊之子元件向父元件傳值的方式

父元件向子元件傳值：父元件通過屬性向下傳值的方式和子元件通訊； 使用步驟：

React之父子元件傳值

1.Header.jsimport React, { Component } from \'react\'; class Header extends Component{ constructor(props){