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 相关文章推荐
学习jquery之一
Apr 27 Javascript
JS 类型转换常见方法小结
May 31 Javascript
JavaScript中数组对象的那些自带方法介绍
Mar 12 Javascript
jquery js 获取时间差、时间格式具体代码
Jun 05 Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
Element图表初始大小及窗口自适应实现
Jul 10 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 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 self与$this的详解
2013/06/08 PHP
PHP APC配置文件2套和参数详解
2014/06/11 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
php获取微信openid方法总结
2019/10/10 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
JavaScript中的事件处理
2008/01/16 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
jquery马赛克拼接翻转效果代码分享
2015/08/24 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
2018/05/26 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
Python 绘图和可视化详细介绍
2017/02/11 Python
解决Python requests 报错方法集锦
2017/03/19 Python
Python基础之getpass模块详细介绍
2017/08/10 Python
python实现多线程行情抓取工具的方法
2018/02/28 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
物理教育专业毕业生推荐信
2013/11/03 职场文书
体育专业个人求职信范文
2013/12/27 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
小学感恩主题班会
2015/08/12 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript