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中的array数组使用技巧
Jan 31 Javascript
caller和callee的区别介绍及演示结果
Mar 10 Javascript
javascript中cookie对象用法实例分析
Jan 30 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 Javascript
vue中监听返回键问题
Aug 28 Javascript
keep-alive保持组件状态的方法
Dec 02 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 Javascript
CocosCreator入门教程之网络通信
Apr 16 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
PHP实现数据库的增删查改功能及完整代码
2018/04/18 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
javascript数组去重小结
2016/03/07 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
对Python中的@classmethod用法详解
2018/04/21 Python
详解python3中zipfile模块用法
2018/06/18 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
施工安全员岗位职责
2015/04/11 职场文书
土建施工员岗位职责
2015/04/11 职场文书
小学班级管理心得体会
2016/01/07 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL