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 相关文章推荐
网页自动跳转代码收集
Sep 27 Javascript
js操作ajax返回的json的注意问题!
Feb 23 Javascript
JavaScript 开发规范要求(图文并茂)
Jun 11 Javascript
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 Javascript
javascript面向对象程序设计(一)
Jan 29 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
Ionic2开发环境搭建教程
Aug 20 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 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 实现页面静态化的几种方法
2017/07/23 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
基于jquery实现在线选座订座之影院篇
2015/08/24 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
2016/06/15 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
vue.js仿hover效果的实现方法示例
2019/01/28 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
动物科学专业求职信
2014/07/27 职场文书
授权委托书
2014/07/31 职场文书
挂职学习心得体会
2014/09/09 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
杨善洲观后感
2015/06/04 职场文书
中秋晚会致辞
2015/07/31 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
MySQL约束超详解
2021/09/04 MySQL
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android