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实现弹窗示例代码网上很多，此处不做说明。