谷歌,火狐浏览器不支持showModalDialog的解决方法

本文介绍如何让window.showModalDialog()方法在谷歌和火狐等现代浏览器中也能正常工作,并提供了一种解决方案,使得该方法能够创建模态对话框,同时保持与IE浏览器的兼容性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先得知道window.showModalDialog()方法到底是干嘛的,有什么作用.

基本介绍:
          showModalDialog()         (IE 4+ 支持)
          showModelessDialog()      (IE 5+ 支持)
          window.showModalDialog()                  方法用来创建一个显示HTML内容的模态对话框。
          window.showModelessDialog()             方法用来创建一个显示HTML内容的非模态对话框。
使用方法:
          vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
          vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
参数说明:
         sURL          --  必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
         vArguments    -- 可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过
 

                          window.dialogArguments来取得传递进来的参数。
         sFeatures     -- 可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
----------------
1.    dialogHeight:    对话框高度,不小于100px
2.    dialogWidth:    对话框宽度。
3.    dialogLeft:     离屏幕左的距离。
4.    dialogTop:     离屏幕上的距离。
5.    center:          { yes | no | 1 | 0 } :              是否居中,默认yes,但仍可以指定高度和宽度。
6.    help:             {yes | no | 1 | 0 }:                是否显示帮助按钮,默认yes。
7.    resizable:       {yes | no | 1 | 0 } [IE5+]:     是否可被改变大小。默认no。
8.    status:          {yes | no | 1 | 0 } [IE5+]:      是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
9.    scroll:            { yes | no | 1 | 0 | on | off }:是否显示滚动条。默认为yes。

以上内容来自于http://www.cnblogs.com/Dlonghow/archive/2009/06/04/1496141.html


然后发现在谷歌,火狐浏览器根本都弹不出来模态对话框,按F12打开调试器发现window.showModalDialog()在这两个浏览器中是根本没有定义的.

解决方法:

$(function(){
    if(window.showModalDialog == undefined){
        //alert("初始化的时候,判断window.showModalDialog是否存在")
        window.showModalDialog = function(url,mixedVar,features){
            window.hasOpenWindow = true;
            if(mixedVar) var mixedVar = mixedVar;
            if(features) var features = features.replace(/(dialog)|(px)/ig,"").replace(/;/g,',').replace(/\:/g,"=");
            window.myNewWindow = window.open(url,"_blank",features);
        }
    }
});


一加载页面的时候,我们就判断这个方法是否是undefined未定义的,如果是,我们给window.showModalDialog()重新赋予新的函数.

原来的写法不变

var returnValue =window.showModalDialog(url,window,"dialogHeight:800px;dialogWidth:800px;center:yes");

子窗口的写法

//选择优惠券
function chooseCoupon(id) {
    var couponName =$('#'+id).val();
    var val={id: id,name:couponName};
    if (window.opener != undefined) {
        //for chrome
        window.opener.returnValue = val;
    }
    else {
        window.returnValue = val;
    }
    //调用父窗口方法
    opener.fuzhi(val);
    window.close();

}

然后遇到打开子窗口的时候就给returnValue赋值,不统一.所以这边换了opener.fuzhi()写法,调用了父类fuzhi的函数,让我们得到的返回值做剩下的业务操作.





<think>好的,用户问的是如何解决谷歌浏览器打不开window.showModalDialog的问题。我得先回忆一下这个API的情况。记得以前Chrome确实支持过window.showModalDialog,但后来移除了。可能用户遇到了兼容性问题,或者他们的应用还在用旧的代码,导致在Chrome上无法运行。 首先,我需要确认这个问题的根源。Chrome在哪个版本移除了这个API呢?应该是Chrome 37之后,大概是2014年左右。这时候用户如果还在用旧版代码,就会遇到问题。所以第一步应该是建议用户检查Chrome的版本,如果可能的话,升级到最新版,但可能用户的应用需要这个API,升级后反而用不了。 接下来,可能的解决方案有几个方向。一是建议用户改用其他浏览器,比如IE或者旧版的Chrome,但IE已经退役,可能不太现实。二是修改代码,替换掉showModalDialog,用现代的方法比如模态框库或者HTML5的dialog元素。或者用polyfill来模拟这个API的行为。 另外,可能用户的应用是企业内部应用,依赖于这个API,无法轻易修改代码。这时候可能需要引导用户如何启用策略来重新启用这个API,不过我记得Chrome可能在更高版本彻底移除了,所以需要确认是否有这样的策略可用。例如,通过Chrome的组策略或者启动参数来开启,但可能只适用于旧版本。 然后,用户可能需要详细的步骤来实施这些解决方案。比如,如何检查Chrome版本,如何修改代码使用替代方法,或者如何配置浏览器策略。同时,需要提醒用户这些方法的注意事项,比如安全风险或兼容性问题。 最后,要确保回答结构清晰,分步骤说明,并且给出具体的代码示例,比如如何使用dialog标签或者modal库。同时,如果有启用策略的方法,要说明具体操作,但也要提醒这可能不适用于最新版本的Chrome,可能需要降级浏览器版本,这可能不是最佳实践。 需要验证各个方案的可行性。例如,使用HTML dialog元素需要检查浏览器支持情况,可能需要polyfill。而使用第三方库如jQuery UI的dialog是否更可靠。同时,启用Chrome策略可能需要用户有管理员权限,或者适用于企业环境。 总结下来,回答的结构应该是先说明问题原因,再分点列出解决方案,每个方案详细步骤,可能遇到的限制,以及替代建议。确保用户能逐步尝试不同的方法,并理解每种方法的优缺点。</think>要解决谷歌浏览器无法使用`window.showModalDialog`的问题,可按以下步骤分析并处理: --- ### **1. 问题根源** - **API废弃**:`window.showModalDialog`是旧版IE浏览器特性,Chrome在37版本后已彻底移除支持。 - **兼容性**:现代浏览器(Chrome/Firefox/Edge)均不再支持此方法,直接调用会导致`undefined`错误。 --- ### **2. 解决方案** #### **方案一:修改代码(推荐)** ##### (1) 使用`<dialog>`标签(HTML5标准) ```html <!-- 定义对话框 --> <dialog id="myDialog"> <p>这是一个模态对话框</p> <button onclick="document.getElementById('myDialog').close()">关闭</button> </dialog> <!-- 触发按钮 --> <button onclick="document.getElementById('myDialog').showModal()">打开对话框</button> ``` - **优点**:原生支持、轻量、符合现代标准。 - **注意**:需兼容旧浏览器时可添加[Polyfill](https://github.com/GoogleChrome/dialog-polyfill)。 ##### (2) 使用第三方模态库(如jQuery UI) ```javascript // 定义对话框内容 <div id="dialog" title="提示"> <p>这是一个模态对话框</p> </div> // 触发对话框 $("#dialog").dialog({ modal: true, buttons: { "关闭": function() { $(this).dialog("close"); } } }); ``` --- #### **方案二:强制启用旧API(临时应急)** - **适用场景**:仅用于兼容遗留系统且无法修改代码的情况。 - **步骤**: 1. 下载旧版Chrome(≤v36),但存在安全风险且不推荐。 2. 通过Chrome策略启用(仅限企业环境): - Windows注册表路径:`HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome` - 新建DWORD值:`EnableDeprecatedWebPlatformFeatures`,设为`1`. --- #### **方案三:使用替代API** 通过`window.open`模拟模态效果: ```javascript const modal = window.open("", "_blank", "width=400,height=300"); modal.document.write("<h1>模态窗口</h1>"); // 通过postMessage与父窗口通信 ``` --- ### **3. 总结建议** | 方案 | 适用场景 | 风险/限制 | |------|----------|-----------| | HTML5 `<dialog>` | 新项目或可重构代码 | 旧浏览器需Polyfill | | 第三方库(如jQuery UI)| 复杂交互需求 | 增加依赖体积 | | 强制启用旧API | 紧急兼容遗留系统 | 安全漏洞、版本限制 | **推荐优先采用方案一**,既符合标准又避免技术债务。若需进一步优化交互逻辑,可结合Promise或异步函数管理模态状态。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Java_wucao

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值