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 使用 NodeList需要注意的问题
Mar 04 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
js纯前端实现腾讯cos文件上传功能的示例代码
May 14 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学习教程之第1天
2008/06/15 PHP
php expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
php数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
读jQuery之十 事件模块概述
2011/06/27 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
wxPython窗口的继承机制实例分析
2014/09/28 Python
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
python Tkinter版学生管理系统
2019/02/20 Python
简单了解django文件下载方式
2020/02/10 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
实习生自我鉴定
2013/12/12 职场文书
创建省级文明单位实施方案
2014/02/27 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
婚前协议书范本两则
2014/10/16 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers