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 相关文章推荐
js利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 Javascript
JS数组的赋值介绍
Mar 10 Javascript
jQuery设置指定网页元素宽度和高度的方法
Mar 25 Javascript
javascript实现连续赋值
Aug 10 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
浅谈Angular HttpClient简单入门
May 04 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
JavaScript正则表达式验证登录实例
Mar 18 Javascript
JavaScript数组 几个常用方法总结
Nov 11 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
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
php下安装配置fckeditor编辑器的方法
2011/03/02 PHP
php注销代码(session注销)
2012/05/31 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
jQuery学习笔记之jQuery的动画
2010/12/22 Javascript
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
javascript学习笔记(十三) js闭包介绍(转)
2012/06/20 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
动态加载jQuery的方法
2015/06/16 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
Linux的主要特性
2016/09/03 面试题
入党积极分子介绍信
2014/01/17 职场文书
优秀求职信
2014/05/29 职场文书
交通事故调解协议书
2015/05/20 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书