JavaScript-Tool-lhgDialog：傳值示例-原始碼

阿新 • • 發佈：2020-07-16

ylbtech-JavaScript-Tool-lhgDialog：傳值示例-原始碼

1、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" 
 />
    <title>傳值示例 - lhgDialog視窗元件 lhgdialog彈出視窗</title>
    <meta name="keywords" content="lhgdialog,dialog,彈出視窗,js視窗,js彈出視窗,js庫,對話方塊,alert,提示,警告,確認,提問,ajax,tip,confirm,open,prompt,lhgcore,javascript,jquery,window,clientside,control,open source,LGPL,dhtml,html,xhtml,plugins" />
    < 
meta name="description" content="lhgdialog是一功能強大的簡單迷你並且高效的彈出視窗外掛,基於網路訪問並且相容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+." />
    <link href="/css/common.css" type="text/css" rel="stylesheet" />
    <link href="/css/prettify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" 
 src="/js/prettify.js"></script>
    <script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/js/lhgdialog.min.js"></script>
    <script type="text/javascript">
        var demoDG1, demoDG2;

        // AA函式為此頁面中的一個示例函式
        function AA() {
            alert('我是元件呼叫頁面的一個函式');
        };

        $(function () {
            // 示例1中的相關程式碼
            $('#demo_01').dialog({ content: 'url:value/value01.html' });
            $('#demo_02').dialog({
                content: 'url:value/value02.html',
                init: function () {
                    // this.content 為視窗內容頁value02.html頁面的window物件
                    this.content.document.getElementById('itxt').value = document.getElementById('txt1').value;
                }
            });
            $('#demo_03').dialog({
                content: 'url:value/value03.html',
                data: document.getElementById('txt1').value
            });

            // 示例2中的相關程式碼
            $('#demo_04').dialog({ content: 'url:value/value04.html' });

            // 示例4中的相關程式碼
            $('#demo_08').dialog({ title: 'B視窗', content: 'url:value/value06.html' });

            // 示例6中的相關程式碼
            $('#demo_14').dialog({ title: 'B視窗', content: 'url:value/value09.html' });

        });

        // 示例3中的相關程式碼
        function opdg1() {
            demoDG1 = $.dialog({ title: 'B視窗', content: 'url:value/value05.html' });
        };

        function getValue1() {
            if (!demoDG1 || demoDG1.closed)
                alert('請先開啟B視窗');
            else // demoDG1.content 為B視窗內容頁面的window物件
                alert(demoDG1.content.document.getElementById('itxt').value);
        };

        function getFunc1() {
            if (!demoDG1 || demoDG1.closed)
                alert('請先開啟B視窗');
            else // demoDG1.content 為B視窗內容頁面的window物件 BB()為B視窗內容頁中的一個函式
                demoDG1.content.BB();
        };

        // 示例5中的相關程式碼
        function opdg2() {
            demoDG2 = $.dialog({ title: 'B視窗', content: 'url:value/value07.html' });
        };

        function getValue2() {
            // demoDG2.content 為B視窗內容頁的window物件
            if (!demoDG2 || !demoDG2.content.cDG || demoDG2.content.cDG.closed)
                alert('請先開啟C視窗');
            else // demoDG2.content.cDG 為B視窗中呼叫C視窗的例項物件 demoDG2.content.cDG.content 即為C視窗內容頁的window物件
                alert(demoDG2.content.cDG.content.document.getElementById('itxt').value);
        };

        function getFunc2() {
            if (!demoDG2 || !demoDG2.content.cDG || demoDG2.content.cDG.closed)
                alert('請先開啟C視窗');
            else
                demoDG2.content.cDG.content.CC();
        };

        function getValue3() {
            /* 通過$.dialog.list['id']物件來獲取C視窗的例項物件，其中的id即為建立C視窗的id
            if( !$.dialog.list['demo_c'] || $.dialog.list['demo_c'].closed )
                alert( '請先開啟C視窗' );
            else
                alert( $.dialog.list['demo_c'].content.document.getElementById('itxt').value );
            */

            // 通過內部的get('id')方法來獲取C視窗內容頁window物件，其中的id即為建立C視窗的id（最推薦使用的方法）
            // get方法有2個引數get('id',1)其中第二個引數只有為數字1時返回視窗例項物件，如不寫或為其它任何值都返回視窗內容頁的window物件
            if (!demoDG2 || !demoDG2.get('demo_c'))
                alert('請先開啟C視窗');
            else
                alert(demoDG2.get('demo_c').document.getElementById('itxt').value);
        };

        function getFunc3() {
            /*if( !$.dialog.list['demo_c'] || $.dialog.list['demo_c'].closed )
                alert( '請先開啟C視窗' );
            else
                $.dialog.list['demo_c'].content.CC();*/

            if (!demoDG2 || !demoDG2.get('demo_c'))
                alert('請先開啟C視窗');
            else
                demoDG2.get('demo_c').CC();
        };

        // 綜合傳值示例程式碼部分
        var demoDG3;

        function opdg3() {
            demoDG3 = $.dialog({ id: 'demo_ZB', title: 'B視窗', content: 'url:value/value11.html' });
        };
        // demoDG3為B視窗的例項物件
        function getValue4() {
            if (!demoDG3 || demoDG3.closed)
                alert('請先開啟B視窗');
            else // demoDG3.content為B視窗的window物件
                alert(demoDG3.content.document.getElementById('btxt').value);
        };

        function getFunc4() {
            if (!demoDG3 || demoDG3.closed)
                alert('請先開啟B視窗');
            else
                demoDG3.content.BB();
        };

        function reloadB() {
            if (!demoDG3 || demoDG3.closed)
                alert('請先開啟B視窗');
            else // demoDG3.content為B視窗的window物件
                demoDG3.reload(demoDG3.content);
        };

        function getValue5() {
            // 此函式使用了元件的$.dialog.list物件來獲取視窗例項物件
            if (!$.dialog.list['demo_ZC'] || $.dialog.list['demo_ZC'].closed)
                alert('請先開啟C視窗');
            else  // $.dialog.list['demo_ZC'].content為id為'demo_ZC'的C視窗的window物件
                alert($.dialog.list['demo_ZC'].content.document.getElementById('ctxt').value);
        };

        function getFunc5() {
            if (!$.dialog.list['demo_ZC'] || $.dialog.list['demo_ZC'].closed)
                alert('請先開啟C視窗');
            else
                $.dialog.list['demo_ZC'].content.CC();
        };

        function closeC() {
            if (!$.dialog.list['demo_ZC'] || $.dialog.list['demo_ZC'].closed)
                alert('請先開啟C視窗');
            else
                $.dialog.list['demo_ZC'].close();
        };

        function reloadC() {
            if (!$.dialog.list['demo_ZC'] || $.dialog.list['demo_ZC'].closed)
                alert('請先開啟C視窗');
            else // $.dialog.list['demo_ZC'].content為id為'demo_ZC'的C視窗的window物件
                $.dialog.list['demo_ZC'].reload($.dialog.list['demo_ZC'].content);
        };
    </script>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="hd_logo"><a href="/index.html">lhgDialog彈窗提示視窗元件</a></div>
            <div class="hd_nav">
                <a href="/index.html">首頁</a> | <a href="/api/">API文件</a> | <a href="/demo/">基礎示例</a> | 傳值示例 | <a href="/animate/">動畫示例</a> | <a href="/frameset/">框架示例</a>
            </div>
        </div>
        <div class="line">&nbsp;</div>
        <div class="cbody">
            <h2>基本的傳值示例(如您有不明白的地方可開啟相應的示例文檢視裡面的相關程式碼)</h2>
            <p>注：所有示例都可象第一個示例那樣通過多種方式實現，除第一個示例使用多種方式外其它示例都使用一種方式，您可根據示例1自行嘗試其它示例的其它實現方法！</p>
            <ol>
                <li>
                    <h3>將呼叫頁面的值傳到視窗中</h3>
                    <p></p>
<pre class="prettyprint">
/* 方式一 在內容頁裡寫程式碼取值 */
/* 下面的程式碼為內容頁value01.html頁面裡的程式碼，請自行開啟此檔案檢視程式碼 */
var api = frameElement.api, W = api.opener;
window.onload = function()
{
    document.getElementById('itxt').value = W.document.getElementById('txt1').value;
};
------------------------------------------------------
/* 方式二 在呼叫視窗程式碼裡使用init引數寫入值 */
/* 下面的程式碼為 執行2 按鈕呼叫視窗元件的程式碼 */
$('#demo_02').dialog({
    content:'url:value/value02.html',
    init:function(){
        /* this.iwin 為視窗內容頁的window物件 */
        this.iwin.document.getElementById('itxt').value = document.getElementById('txt1').value;
    }
});
------------------------------------------------------
/* 方式三 在呼叫視窗程式碼裡使用data引數來傳入值 */
/* 下面的程式碼為 執行3 按鈕呼叫視窗元件的程式碼 */
$('#demo_02').dialog({
    content:'url:value/value02.html',
    data:document.getElementById('txt1').value;
});
/* 下面的程式碼為內容頁value03.html頁面裡的程式碼，請自行開啟此檔案檢視程式碼 */
var api = frameElement.api;
window.onload = function()
{
    document.getElementById('itxt').value = api.data;
};
</pre>
                    <p><input class="runinput" size="25" id="txt1" type="text" value="呼叫元件頁面中文字框的值" />&nbsp;<button class="runcode" id="demo_01">執行1»</button>&nbsp;<button class="runcode" id="demo_02">執行2»</button>&nbsp;<button class="runcode" id="demo_03">執行3»</button></p>
                    <p>
                        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                        <ins class="adsbygoogle"
                             style="display:inline-block;width:728px;height:90px"
                             data-ad-client="ca-pub-9761122628191004"
                             data-ad-slot="2248956816"></ins>
                        <script>
                            (adsbygoogle = window.adsbygoogle || []).push({});
                        </script>
                    </p>
                </li>
                <li>
                    <h3>將視窗中的值傳回到呼叫頁面中</h3>
                    <p>注：實現的方法也有很多種，請自行嘗試</p>
<pre class="prettyprint">
/* 下面的程式碼為內容頁value04.html頁面裡的程式碼，請自行開啟此檔案檢視程式碼 */
var api = frameElement.api, W = api.opener;
api.button({
    id:'valueOk',
    name:'確定',
    callback:ok
});
/* 函式ok即為上面新增按鈕方法中callback回撥函式呼叫的函式 */
function ok()
{
    W.document.getElementById('txt2').value = document.getElementById('itxt').value;
};
</pre>
                    <p><input class="runinput" size="25" id="txt2" type="text" value="" />&nbsp;<button class="runcode" id="demo_04">執行»</button></p>
                </li>
                <li>
                    <h3>在呼叫頁面呼叫視窗B中的值或函式</h3>
                    <p>注：實現的方法也有很多種，請自行嘗試</p>
<pre class="prettyprint">
/* 下面的程式碼為：“呼叫B視窗中文字框的值” 按鈕所呼叫的函式的程式碼 */
function getValue1()
{
    if( !demoDG1 || demoDG1.closed )
        alert( '請先開啟B視窗' );
    else // demoDG1.content 為B視窗內容頁面的window物件
        alert( demoDG1.content.document.getElementById('itxt').value );
};
------------------------------------------------------
/* 下面的程式碼為：“呼叫B視窗的函式” 按鈕所呼叫的函式的程式碼 */
function getFunc1()
{
    if( !demoDG1 || demoDG1.closed )
        alert( '請先開啟B視窗' );
    else // demoDG1.content 為B視窗內容頁面的window物件 BB()為B視窗內容頁中的一個函式
        demoDG1.content.BB();
};
</pre>
                    <p><button class="runcode" id="demo_05" onclick="opdg1();">開啟B視窗»</button>&nbsp;<button class="runcode" id="demo_06" onclick="getValue1();">呼叫B視窗中文字框的值»</button>&nbsp;<button class="runcode" id="demo_07" onclick="getFunc1();">呼叫B視窗的函式»</button></p>
                </li>
                <li>
                    <h3>在呼叫頁面呼叫視窗B中的值或函式</h3>
                    <p>注：實現的方法也有很多種，請自行嘗試</p>
<pre class="prettyprint">
/* 下面的程式碼為內容頁value06.html頁面裡的程式碼，請自行開啟此檔案檢視程式碼 */
var api = frameElement.api, W = api.opener;
// getValue函式為內容頁value06.html頁面裡的“元件呼叫頁面文字框的值” 按鈕所呼叫的函式
function getValue()
{
    alert( W.document.getElementById('txt3').value );
};
// 下面的程式碼為內容頁value06.html頁面裡“元件呼叫頁面的函式” 按鈕單擊事件所呼叫的函式
W.AA();
</pre>
                    <p><input class="runinput" size="27" id="txt3" type="text" value="lhgdialog元件呼叫頁面文字框" />&nbsp;<button class="runcode" id="demo_08">開啟B視窗»</button></p>
                </li>
                <li>
                    <h3>在呼叫頁面呼叫C視窗(也就是B視窗的子視窗)的值或函式</h3>
                    <p>注：實現的方法也有很多種，請自行嘗試</p>
<pre class="prettyprint">
/* 方式一 直接使用js原生方法來實現 */
function getValue2()
{
    // demoDG2.content 為B視窗內容頁的window物件
    if( !demoDG2 || !demoDG2.content.cDG || demoDG2.content.cDG.closed )
        alert( '請先開啟C視窗' );
    else // demoDG2.content.cDG 為B視窗中呼叫C視窗的例項物件 demoDG2.content.cDG.content 即為C視窗內容頁的window物件
        alert( demoDG2.content.cDG.content.document.getElementById('itxt').value );
};
function getFunc2()
{
    if( !demoDG2 || !demoDG2.content.cDG || demoDG2.content.cDG.closed )
        alert( '請先開啟C視窗' );
    else
        demoDG2.content.cDG.content.CC();
};
------------------------------------------------------
/* 方式二 通過視窗的id引數來實現 （推薦使用這種方法來實現，這種方法更直觀，更易理解） */
function getValue3()
{
    /* 通過$.dialog.list['id']物件來獲取C視窗的例項物件，其中的id即為建立C視窗的id
    if( !$.dialog.list['demo_c'] || $.dialog.list['demo_c'].closed )
        alert( '請先開啟C視窗' );
    else
        alert( $.dialog.list['demo_c'].content.document.getElementById('itxt').value );
    */
    
// 通過內部的get('id')方法來獲取C視窗內容頁window物件，其中的id即為建立C視窗的id（最推薦使用的方法）
// get方法有2個引數get('id',1)其中第二個引數只有為數字1時返回視窗例項物件，如不寫或為其它任何值都返回視窗內容頁的window物件
    if( !demoDG2 || !demoDG2.get('demo_c') )
        alert( '請先開啟C視窗' );
    else
        alert( demoDG2.get('demo_c').document.getElementById('itxt').value );
};
function getFunc3()
{
    /*
    if( !$.dialog.list['demo_c'] || $.dialog.list['demo_c'].closed )
        alert( '請先開啟C視窗' );
    else
        $.dialog.list['demo_c'].content.CC();
    */
    // 演示示例都是使用的get內部方法來實現的
    if( !demoDG2 || !demoDG2.get('demo_c') )
        alert( '請先開啟C視窗' );
    else
        demoDG2.get('demo_c').CC();
};

</pre>
                    <p><button class="runcode" id="demo_09" onclick="opdg2();">開啟B視窗»</button>&nbsp;<button class="runcode" id="demo_10" onclick="getValue2();">呼叫C視窗中文字框的值(方式一)»</button>&nbsp;<button class="runcode" id="demo_11" onclick="getFunc2();">呼叫c視窗的函式(方式一)»</button></p><p><button class="runcode" id="demo_12" onclick="getValue3();">呼叫C視窗中文字框的值(方式二)»</button>&nbsp;<button class="runcode" id="demo_13" onclick="getFunc3();">呼叫c視窗的函式(方式二)»</button></p>
                </li>
                <li>
                    <h3>在C視窗(也就是B視窗的子視窗)中呼叫元件呼叫頁面中的值或函式</h3>
                    <p>注：實現的方法也有很多種，請自行嘗試</p>
<pre class="prettyprint">
/* 下面的程式碼為內容頁value10.html頁面裡的程式碼，請自行開啟此檔案檢視程式碼 */
var api = frameElement.api, W = api.opener;
// getValue函式為內容頁value10.html頁面裡的“元件呼叫頁面文字框的值” 按鈕所呼叫的函式
function getValue()
{
    alert( W.document.getElementById('txt4').value );
};
// 下面的程式碼為內容頁value10.html頁面裡“元件呼叫頁面的函式” 按鈕單擊事件所呼叫的函式
W.AA();
</pre>
                    <p><input class="runinput" size="27" id="txt4" type="text" value="lhgdialog元件呼叫頁面文字框" />&nbsp;<button class="runcode" id="demo_14">開啟B視窗»</button></p>
                </li>
            </ol>
            <h2>綜合的傳值示例</h2>
            <p>注：各種呼叫頁面與視窗間的各種方法的傳值示例，請自行開啟相應檔案檢視程式碼</p>
            <ol>
                <li>
                    <h3>多視窗間，頁面與視窗間的綜合傳值</h3>
                    <p></p>
<pre class="prettyprint">
注：由於程式碼量較大，這裡不再寫其相關程式碼，各種方法的相關程式碼請自行開啟相應的檔案檢視相關的程式碼，程式碼中都帶有註釋！
注：本示例都使用視窗id的屬性，內部的get方法來實現，至於其它實現方法您可參考前面的示例來完成！
</pre>
                    <p><input class="runinput" size="33" id="txt5" type="text" value="lhgdialog彈出視窗元件超強傳值功能" />&nbsp;<button class="runcode" id="demo_15" onclick="opdg3();">開啟B視窗»</button></p>
                    <p><button class="runcode" id="demo_16" onclick="getValue4();">呼叫B視窗中文字框的值»</button>&nbsp;<button class="runcode" id="demo_17" onclick="getFunc4();">呼叫B視窗中的函式»</button>&nbsp;<button class="runcode" id="demo_18" onclick="demoDG3.close();">關閉B視窗»</button>&nbsp;<button class="runcode" id="demo_19" onclick="reloadB();">重新整理B視窗»</button></p>
                    <p><button class="runcode" id="demo_20" onclick="getValue5();">呼叫C視窗中文字框的值»</button>&nbsp;<button class="runcode" id="demo_21" onclick="getFunc5();">呼叫C視窗中的函式»</button>&nbsp;<button class="runcode" id="demo_22" onclick="closeC();">關閉C視窗»</button>&nbsp;<button class="runcode" id="demo_23" onclick="reloadC();">重新整理C視窗»</button></p>
                </li>
            </ol>
        </div>
        <div class="line">&nbsp;</div>
        <div class="footer">
            <div class="ft_copy">
                Copyright © 2013-2020 <a href="http://www.lhgdialog.com/" target="_blank">www.lhgdialog.com</a>. All rights reserved.
                <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cspan id='cnzz_stat_icon_5759176'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s17.cnzz.com/stat.php%3Fid%3D5759176%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>
            </div>
        </div>
        <script type="text/javascript" src="//js.users.51.la/20198835.js"></script>
    </div>
    <script type="text/javascript">prettyPrint();</script>
    </div>
</body>
</html>

2、

作者：ylbtech
出處：http://ylbtech.cnblogs.com/
本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連線，否則保留追究法律責任的權利。

JavaScript-Tool-lhgDialog：傳值示例-原始碼

ylbtech-JavaScript-Tool-lhgDialog：傳值示例-原始碼 1.返回頂部 1、 <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio

JavaScript-Tool-lhgDialog：傳值示例

ylbtech-JavaScript-Tool-lhgDialog：傳值示例 1.返回頂部 1、基本的傳值示例(如您有不明白的地方可開啟相應的示例文檢視裡面的相關程式碼)

JavaScript-Tool-lhgDialog：基礎示例-原始碼

ylbtech-JavaScript-Tool-lhgDialog：基礎示例-原始碼 1.返回頂部 1、 <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio

JavaScript-Tool-lhgDialog：基礎示例

ylbtech-JavaScript-Tool-lhgDialog：基礎示例 1.返回頂部 1、面板切換演示執行» 配置引數演示

JavaScript-Tool-lhgDialog：動畫示例

ylbtech-JavaScript-Tool-lhgDialog：動畫示例 1.返回頂部 1、 ajax擴充套件示例注：本頁面中的示例使有的動畫和ajax部分方法都使用jQuery庫中相關的方法，所以使用本頁面中的示例必須載入jQuery庫，

JavaScript-Tool-lhgDialog：框架示例

ylbtech-JavaScript-Tool-lhgDialog：框架示例 1.返回頂部 1、 2、 2. 原始碼返回頂部 1、 <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR