| ylbtech-JavaScript-Tool-lhgDialog：传值示例 |
| 1.返回顶部 |
1、
基本的传值示例(如您有不明白的地方可打开相应的示例文查看里面的相关代码)
注：所有示例都可象第一个示例那样通过多种方式实现，除第一个示例使用多种方式外其它示例都使用一种方式，您可根据示例1自行尝试其它示例的其它实现方法！
-
将调用页面的值传到窗口中
/* 方式一 在内容页里写代码取值 */
/* 下面的代码为内容页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;
}; -
将窗口中的值传回到调用页面中
注：实现的方法也有很多种，请自行尝试
/* 下面的代码为内容页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;
}; -
在调用页面调用窗口B中的值或函数
注：实现的方法也有很多种，请自行尝试
/* 下面的代码为：“调用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();
}; -
在调用页面调用窗口B中的值或函数
注：实现的方法也有很多种，请自行尝试
/* 下面的代码为内容页value06.html页面里的代码，请自行打开此文件查看代码 */
var api = frameElement.api, W = api.opener;
// getValue函数为内容页value06.html页面里的“组件调用页面文本框的值” 按钮所调用的函数
function getValue()
{
alert( W.document.getElementById('txt3').value );
};
// 下面的代码为内容页value06.html页面里“组件调用页面的函数” 按钮单击事件所调用的函数
W.AA(); -
在调用页面调用C窗口(也就是B窗口的子窗口)的值或函数
注：实现的方法也有很多种，请自行尝试
/* 方式一 直接使用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();
}; -
在C窗口(也就是B窗口的子窗口)中调用组件调用页面中的值或函数
注：实现的方法也有很多种，请自行尝试
/* 下面的代码为内容页value10.html页面里的代码，请自行打开此文件查看代码 */
var api = frameElement.api, W = api.opener;
// getValue函数为内容页value10.html页面里的“组件调用页面文本框的值” 按钮所调用的函数
function getValue()
{
alert( W.document.getElementById('txt4').value );
};
// 下面的代码为内容页value10.html页面里“组件调用页面的函数” 按钮单击事件所调用的函数
W.AA();
综合的传值示例
注：各种调用页面与窗口间的各种方法的传值示例，请自行打开相应文件查看代码
-
多窗口间，页面与窗口间的综合传值
注：由于代码量较大，这里不再写其相关代码，各种方法的相关代码请自行打开相应的文件查看相关的代码，代码中都带有注释！
注：本示例都使用窗口id的属性，内部的get方法来实现，至于其它实现方法您可参考前面的示例来完成！
2、
| 2.返回顶部 |
| 3.返回顶部 |
| 4.返回顶部 |
| 5.返回顶部 |
1、
2、
| 6.返回顶部 |
 |
作者：ylbtech 出处：http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 |