javascript 子窗体父窗体相互传值方法


Posted in Javascript onMay 31, 2010

三水点靠木精简使用版本,一般情况好多cms都有一些这样的函数。dedecms中的选择相关文章也是用的这样的函数。下面给出具体的代码。
父页面核心代码:

<script>
function SelectArcListA(fname){ 
var posLeft = 10; 
var posTop = 10; 
window.open("content_select_list.asp?f="+fname+"&k="+form1.keyword.value, "selArcList", "scrollbars=yes,resizable=yes,statebar=no,width=700,height=500,left="+posLeft+", top="+posTop); 
}
</script>
<input name="lsel" type="button" id="lsel" class="nbt" style="width:150px" onChange="" value="从已发布文档中选取..." onClick="SelectArcListA('form1.xiangguanid');">

子页面的核心代码:
<SCRIPT language=javascript> 
//获得选中文件的文件名 
function getCheckboxItem() 
{ 
var allSel=""; 
if(document.form2.arcID.value) return document.form2.arcID.value; 
for(i=0;i<document.form2.arcID.length;i++) 
{ 
if(document.form2.arcID[i].checked) 
{ 
if(allSel=="") 
allSel = document.form2.arcID[i].value; 
else 
allSel = allSel+","+document.form2.arcID[i].value; 
} 
} 
return allSel; 
} 
function selAll() 
{ 
for(i=0;i<document.form2.arcID.length;i++) 
{ 
if(!document.form2.arcID[i].checked) 
{ 
document.form2.arcID[i].checked=true; 
} 
} 
} 
function noSelAll() 
{ 
for(i=0;i<document.form2.arcID.length;i++) 
{ 
if(document.form2.arcID[i].checked) 
{ 
document.form2.arcID[i].checked=false; 
} 
} 
} 
function ReturnValue() 
{ 
if(window.opener.document.form1.xiangguanid.value==""){ 
window.opener.document.form1.xiangguanid.value = getCheckboxItem(); 
} 
else{ 
window.opener.document.form1.xiangguanid.value += ","+getCheckboxItem(); 
} 
alert("成功增加你选中的ID,你可以继续增加"); 
//window.opener=true; 
//window.close(); 
}

下面是html代码,页面中需要<input type="checkbox" name="arcID" value="<%=rs("id")%>">输出选择的id
<A class=inputbutx 
href="javascript:selAll()">全选</A>   <A class=inputbutx 
href="javascript:noSelAll()">取消</A>   <A class=inputbutx 
href="javascript:ReturnValue()">把选定值加到列表</A>

一下是补充:
//模式窗体传值

<!-- ====== 父窗体,我取名为parentform.html ==== -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<title>弹出窗口内录入数据确定后返回给父窗体--主窗体</title> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT="jb 51.net"> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> <script language="javascript" type="text/javascript"> 
function doInput() 
{ 
var win = window.showModalDialog("Childform.html",window,"dialogWidth=500px;dialogHeight=300px;center=yes;status=no"); 
if(win != null) 
{ 
document.getElementById("parentTextBox").value = win; 
} 
} 
</script> 
</head> 
<body>在新弹出的窗体里输入数据,传输到父窗体. 
<br/> 
<br/> 
<br/> 
  <input type="text" id="parentTextBox" /> <a href="javascript:doInput()">点这里弹出子窗体</a> 
</BODY> 
</HTML>

<!-- ============= 父窗体代码结束 ============= -->

<!-- ======= 子窗体:取名为childform.html  ======= -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<title> 弹出窗口内录入数据确定后返回给父窗体--子窗体</title> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT="qiujy"> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<base target="_self"> 
</head> 
<body topmargin="0" leftmargin="0" scroll="no"> 
</br> 
  <input type="text" id="childTextBox"/> 
</br></br> 
  <a href="javascript:doPassToParent()">点这里返回</a> 
</BODY> 
</HTML> 
<script language="javascript" type="text/javascript"> 
document.getElementById("childTextBox").value = window.dialogArguments.document.getElementById("parentTextBox").value; 
function doPassToParent() 
{ 
if(document.getElementById("childTextBox").value.length <=0) 
{ 
alert("请填写数据"); 
return; 
} 
window.returnValue = document.getElementById("childTextBox").value; 
window.close(); } 
</script>

//子窗体和父窗体传值

1.新建两个页面 一个是 Parent.html

<!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>父窗体</title> 
<script language="javascript" type="text/javascript"> 
function OpenWindow(){ 
window.open('son.html'); 
} 
function setValue(m_strValue){ 
document.getElementById("txt_Value").value = m_strValue; 
} 
</script> 
</head> <body> 
<form id="form1" name="form1" method="post" action=""> 
<label> 
<input type="text" name="txt_Value" id="txt_Value" /> 
</label> 
<label> 
<input type="button" name="btn_ShowClose" id="btn_ShowClose" value="按钮" onclick="OpenWindow();" /> 
</label> 
</form> 
</body> 
</html>

另一个是子窗体 :
<!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>子窗体</title> 
<script language="javascript" type="text/javascript" > 
function CloseWind(){ 
opener.setValue("传值到父窗体"); 
window.close(); 
} 
</script> 
</head> <body> 
<form id="form1" name="form1" method="post" action=""> 
<label>关闭 
<input type="button" name="btn_Close" id="btn_Close" value="按钮" onclick="CloseWind();" 
/> 
</label> 
</form> 
</body> 
</html>

2.通过子窗体执行的父窗体的setValue(m_strValue)来执行赋值操作.
Javascript 相关文章推荐
javascript编程起步(第一课)
Jan 10 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 Javascript
10个在JavaScript开发中常遇到的BUG
Dec 18 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
JS eval代码快速解密实例解析
Apr 23 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 Javascript
js post方式传递提交的实现代码
May 31 #Javascript
JS 类型转换常见方法小结
May 31 #Javascript
javascript 传统事件模型构造的事件监听器实现代码
May 31 #Javascript
LazyLoad 延迟加载(按需加载)
May 31 #Javascript
基于jquery的气泡提示效果
May 31 #Javascript
niceTitle 基于jquery的超链接提示插件
May 31 #Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 #Javascript
You might like
phpMyadmin 用户权限中英对照
2010/04/02 PHP
学习php过程中的一些注意点的总结
2013/10/25 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
模仿百度三维地图的js数据分享
2011/05/12 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
js实现文字滚动效果
2016/03/03 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
React Native第三方平台分享的实例(Android,IOS双平台)
2017/08/04 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
2019/01/20 Javascript
vue实现拖拽效果
2019/12/23 Javascript
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
Python 正则表达式操作指南
2009/05/04 Python
全面了解python字符串和字典
2016/07/07 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
python绘制高斯曲线
2021/02/19 Python
黄继光的英雄事迹材料
2014/02/13 职场文书
运动会标语
2014/06/21 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android