asp.net下用js实现弹出子窗口选定值并返回

某次暑假,某项目,老师说需要一个弹窗选值的功能。
一开始以为这个功能很简单实现,后来发现其实非常麻烦。
在此翻阅笔记回忆总结以下。
我考虑的解决方案有以下几种:
利用js提供的window对象的open和showModalDialog方法,这两种方法各有优劣。

总的来说 open方法各个浏览器的兼容性更好,经过在ie chrome firefox上试验,都能顺利完成功能。

但缺点有如下两点:
1).部分浏览器会默认阻止open方法设置的弹窗。
2).open方法打开新一个新的弹窗,可以同时对弹窗以及原窗口进行操作。

用showModalDialog方法是打开一个遮罩层的子窗口,只要子窗口未关闭,就不能对父窗口进行
操作。但是在实践的过程中,遇到了各种容错率差的问题。
因为弹出窗口有一个gridview,所以首先就要从数据库获取数据并绑定。既然有gridview那么
肯定就设计到分页和选中某行某值的问题,我选择了使用.net控件自带的两个方法进行选择和
分页(SelectedIndexChanged方法和PageIndexChanging方法,其实还有表格的信息搜索功能)
。那么这时候问题来了!!

问题:在调用window对象showModalDialog方法时,如果在弹出的子窗口,调用任何一个后台的
方法,或者说做出任何和服务器交互的动作,就会造成对象丢失,也就是说取到的值无法进行
返回到父页面。

别慌,有问题那么自然有有解决方案。

解决方案一:既然调用后台的方法对象会丢失无法传参回父页面,那干脆使用session存储选择
的数据,这样数据就一定能取到。

本以为解决了,没想到问题又来了。老师提醒我说,session是有默认时间的,我想是啊,万一
用户选择后,就去上厕所了,回来session过期了,那岂不是完蛋了。

存在问题:session有默认时间的限制。

又一次被老师拒绝了,心有不甘的我继续查阅资料,不久就有研究出一种解决方案。

解决方案二:利用ifream框架将表格所在的页面包含在弹出的子页面中,在表格所在的页面中
通过window.parent调用弹出子页面的js函数进行选定值的返回,这样技能调用后台的方法
showModalDialog对象也不会丢失。

我心想这样解决总是完成了吧。功能是实现了,但是。。。问题又来了。老师拿我的程序调试
,出现了弹出子窗口不能正确按照参数设置的大小进行显示,可在我的电脑上都能很好的实现
啊。我又一次去查阅资料。

存在问题:在ie9浏览器或者版本更低的ie浏览器,当showModalDialog对象弹出的子窗口包含
框架时,浏览器就不兼容。

这个问题我实在没有办法解决了。。。心想放弃showModalDialog方法。
解决方案三(div模拟弹窗):很快我又写了一版用div隐藏模拟弹窗的方法。

后来我仔细分析了一下,这种方法还是存在很大缺点的。既然是要求弹窗选择功能,那肯定表
格中有很多数据了,如果用div模拟的方式,这样一个页面就要读取过多的数据,造成一个页面
会加载过慢。

存在问题:数据过多时,页面加载速度会很慢。

解决方案四:后来通过查资料,gridview的分页和选择某行搜索操作都用js实现,这样总算是 实现了功能。

总结:实现弹窗选值功能方法如下
方法1.利用div 模仿弹出窗口(缺点:数据多加载页面会卡)
方法2.window.open(缺点:浏览器会当做弹出组织,兼容性很差)
方法3.window.showModalDialog
缺点1:执行后台方法会丢失对象
缺点2:利用框架封装对象时 IE9+以上的浏览器 不能规定大小
解决方案:所有功能用JS实现

window.open和window.showModalDialog方法和div实现弹窗示例代码网上很多,此处不做说明。

潮平帆远,击水三千
原文地址:https://www.cnblogs.com/yfsmooth/p/4419380.html