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实现QueryString获取GET参数的方法
Jul 02 Javascript
js 中的switch表达式使用示例
Jun 03 Javascript
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
javascript学习笔记(八)正则表达式
Oct 08 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
Jan 05 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
Apr 13 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
微信小程序返回箭头跳转到指定页面实例解析
Oct 08 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 Javascript
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
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的十大要点(上)
2009/02/04 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
Javascript 强制类型转换函数
2009/05/17 Javascript
jquery 简单导航实现代码
2009/09/11 Javascript
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
jQuery获取cookie值及删除cookie用法实例
2016/04/15 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
美国睫毛、眉毛精华液领导品牌:RevitaLash Cosmetics
2018/03/26 全球购物
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
一些Unix笔试题和面试题
2012/09/25 面试题
公司活动邀请函
2014/01/24 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
安全生产警示教育活动总结
2015/05/09 职场文书
golang DNS服务器的简单实现操作
2021/04/30 Golang
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS