Js 弹出框口并返回值的两种常用方法


Posted in Javascript onDecember 30, 2010

1.window.showModalDialog(url,args,dialogattrs)
参数说明:
url:弹出页面地址
agrs:主窗口传给对话框的参数,可以是任意类型(数组也可以)
dialogattrs:弹出窗口的样式参数
模式对话框用法:
主窗口:var value =window.showModalDialog('test.jsp',strs,'resizable:yes');
弹出框中通过window.returnValue来设置返回值,上面的value拿到的就是这个值,然后主窗口中可以对
这个值进行处理,实现交互处理
注:模式对话框的应用就在于它的返回值,可以返回简单字符窜,也可以返回数组,非模式对话框类似
2。window.open:
【父窗口】

<script> 
function show_child() 
{ 
var child=window .open("child.html","child","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no"); 
/* if(!child.closed) 
{ 
if(!window .close()) 
{ 
var textValue = frm.txt.value; parent.frm0.txt0.value = textValue; 
} 
else 
{ 
window .close(); 
child.close(); 
} 
}*/ 
} 
</script> 
<a href="javascript:show_child();">打开子窗口</a> 
<form name=frm0> 
<input type="text" name="txt0" id="txt0"> //注意这里一定要写ID属性不然FF下取不到值 
</form>

【子窗口】
<script> 
function choseItem() 
{ 
var v=""; 
var check_item = document.frm.item; 
for(i=0;i<check_item.length;i++) 
{ 
if(check_item[i].checked) 
{ 
v+=","+check_item[i].value; 
} 
document.frm.txt.value=v.replace(/^,{1}/,""); 
} 
} 
function foo() 
{ 
window .close(); 
window .opener.document.getElementById("txt0").value=document.getElementById("txt").value 
} 
</script> 
<body> 
<form name=frm> 
<input type=checkbox name=item value=1 onclick="choseItem();">a 
<input type=checkbox name=item value=2 onclick="choseItem();">b 
<input type=checkbox name=item value=3 onclick="choseItem();">c 
<input type=checkbox name=item value=4 onclick="choseItem();">d 
<input type=text name="txt" id="txt"> 
</form> 
<input type=button value="关闭" onclick="foo();"> 
</body>

小结:一般情况下,windows.open因为自定义的比较多,所以用windows.open的较多,上面的很多网页编辑器喜欢用showModalDialog,实在不知道用哪个的的,就用window.open吧,很多成熟的cms系统都是用的window.open.
Javascript 相关文章推荐
很酷的javascript loading效果代码
Jun 18 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
Apr 15 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
vue学习笔记之Vue中css动画原理简单示例
Feb 29 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 #Javascript
Javascript事件热键兼容ie|firefox
Dec 30 #Javascript
某人初学javascript的时候写的学习笔记
Dec 30 #Javascript
Javascript延迟执行实现方法(setTimeout)
Dec 30 #Javascript
JavaScript的document对象和window对象详解
Dec 30 #Javascript
javascript hashtable 修正版 下载
Dec 30 #Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 #Javascript
You might like
跟我学Laravel之安装Laravel
2014/10/15 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
学习ExtJS fit布局使用说明
2009/10/08 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
python绘制直线的方法
2018/06/30 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
用python写测试数据文件过程解析
2019/09/25 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
Python生成器常见问题及解决方案
2020/03/21 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
简约控的天堂:The Undone
2016/12/21 全球购物
string = null 和string = ''的区别
2013/04/28 面试题
商务专员岗位职责
2013/11/23 职场文书
董事长秘书岗位职责
2013/11/29 职场文书
导游实习生自荐书
2014/01/28 职场文书
销售人员获奖感言
2014/02/05 职场文书
开幕式邀请函
2015/01/31 职场文书
设备技术员岗位职责
2015/04/11 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
教师外出学习心得体会
2016/01/18 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书