解决谷歌浏览器showModalDialog对话框兼容问题的实用方案
![](https://csdnimg.cn/release/wenkucmsfe/public/img/star.98a08eaa.png)
在开发过程中,开发者可能会遇到谷歌浏览器(Chrome)对JavaScript的`showModalDialog()`方法不兼容的情况。此方法原本是用于在网页中创建一个模态对话框,但在谷歌浏览器中,由于其安全性和隐私策略的限制,`showModalDialog`并未得到完全支持。当在IE或Firefox中正常工作的代码在Chrome中失效时,问题可能表现为点击后无响应。 谷歌浏览器不支持`showModalDialog`的原因主要是出于安全考虑,特别是针对弹出窗口的控制。Chrome为了阻止恶意网页滥用弹出窗口,禁止了这个API的使用。因此,直接调用`showModalDialog`函数在Chrome中将不会产生预期的效果。 解决这个问题的方法是利用条件语句检测用户代理字符串(`navigator.userAgent`),以便在检测到Chrome浏览器时采取不同的处理方式。如果用户正在使用Chrome,代码会使用`window.open()`方法替代,设置一系列自定义参数来创建一个类似的模态效果,如固定大小、位置以及防止滚动条、工具栏等元素的显示。 具体实现如下: ```javascript function showModalDialog(url, args, width, height) { var tempReturnValue; // 检查是否是Chrome浏览器 if (navigator.userAgent.indexOf("Chrome") > 0) { // 使用window.open()方法,设置参数以模仿模态对话框 var paramsChrome = 'height=' + height + ',width=' + width + ',top=' + (((window.screen.height - height) / 2) - 50) + ',left=' + ((window.screen.width - width) / 2) + ',toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no'; window.open(url, "newwindow", paramsChrome); } else { // 对于非Chrome浏览器,使用showModalDialog var params = 'dialogWidth:' + width + 'px;dialogHeight:' + height + 'px;status:no;dialogLeft:' + ((window.screen.width - width) / 2) + 'px;dialogTop:' + (((window.screen.height - height) / 2) - 50) + 'px'; tempReturnValue = window.showModalDialog(url, args, params); } // 对于Chrome,可能需要在window.open后的回调中执行后续操作,如处理返回值 // TODO: 在这里添加对tempReturnValue的操作,因为Chrome不会返回值,但在非Chrome中可能有 } // 调用示例 function showMyModalDialog() { var url = "SelectUser.aspx"; // 传递参数到自定义函数 var modalReturnValue = myShowModalDialog(url, window, 300, 500); // 如果在非Chrome中,此处可以访问并处理modalReturnValue // alert(modalReturnValue.name); } ``` 通过这种方式,开发者可以在保持代码通用性的同时,确保在Chrome中创建类似模态对话框的效果,尽管这并不是原生的`showModalDialog`功能。
![](https://csdnimg.cn/release/download_crawler_static/12800224/bg1.jpg)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/default.jpg!1)
- 粉丝: 7
- 资源: 970
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- Vue实现iOS原生Picker组件:详细解析与实现思路
- Arduino蓝牙小车:参数调试与功能控制
- 百度Java面试精华:200页精选资源涵盖核心知识点
- Swift使用CoreData填坑指南:CoreData在Swift 3.0的变化
- 微距离无线充电器创新设计及其实验探索
- MTK Android平台开发全攻略:44步详解流程
- RecyclerView全面解析:替代ListView的新选择
- Android开发:自动适配中英文键盘解决方案
- Android调用WebService接口教程
- Android开发:BitmapUtil图片处理全解析与实例
- Android多线程断点续传实现详解
- PCA算法在人脸识别会议签到系统中的应用
- EventBus 3.0:Android事件总线详解与实战应用
- Android FileUtil:全面解析文件操作实用技巧与实例
- RecyclerView添加头部和尾部实战教程
- Android实现微博滑动固定顶部栏实战与优化
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)