JavaScript-Tool-lhgDialog：传值示例-源代码
Posted storebook
tags:
篇首语：本文由小常识网(cha138.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-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"> </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="调用组件页面中文本框的值" /> <button class="runcode" id="demo_01">运行1»</button> <button class="runcode" id="demo_02">运行2»</button> <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="" /> <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> <button class="runcode" id="demo_06" onclick="getValue1();">调用B窗口中文本框的值»</button> <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组件调用页面文本框" /> <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> <button class="runcode" id="demo_10" onclick="getValue2();">调用C窗口中文本框的值(方式一)»</button> <button class="runcode" id="demo_11" onclick="getFunc2();">调用c窗口的函数(方式一)»</button></p><p><button class="runcode" id="demo_12" onclick="getValue3();">调用C窗口中文本框的值(方式二)»</button> <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组件调用页面文本框" /> <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弹出窗口组件超强传值功能" /> <button class="runcode" id="demo_15" onclick="opdg3();">打开B窗口»</button></p> <p><button class="runcode" id="demo_16" onclick="getValue4();">调用B窗口中文本框的值»</button> <button class="runcode" id="demo_17" onclick="getFunc4();">调用B窗口中的函数»</button> <button class="runcode" id="demo_18" onclick="demoDG3.close();">关闭B窗口»</button> <button class="runcode" id="demo_19" onclick="reloadB();">刷新B窗口»</button></p> <p><button class="runcode" id="demo_20" onclick="getValue5();">调用C窗口中文本框的值»</button> <button class="runcode" id="demo_21" onclick="getFunc5();">调用C窗口中的函数»</button> <button class="runcode" id="demo_22" onclick="closeC();">关闭C窗口»</button> <button class="runcode" id="demo_23" onclick="reloadC();">刷新C窗口»</button></p> </li> </ol> </div> <div class="line"> </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、
| 2.返回顶部 |
| 3.返回顶部 |
| 4.返回顶部 |
| 5.返回顶部 |
| 6.返回顶部 |
 |
作者：ylbtech 出处：http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 |
以上是关于JavaScript-Tool-lhgDialog：传值示例-源代码的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript-Tool-lhgDialog：基础示例-源代码
JavaScript-Tool-lhgDialog：动画示例-源代码