我怎样才能使window.showmodaldialog工作在铬37？

我们有一个巨大的Web应用程序，我们使用window.showmodaldialog来提醒，确认和popup窗口。 自Chrome版本37以来，此通话已被禁用。

有没有什么快速的解决方法，使window.showmodaldialog在最新版本的Chrome中工作？

我在这里添加一个解决方法window.showmodaldialog，虽然这不是一个完美的解决方法，因为这不会像showmodaldialog所做的那样破坏代码执行，相反，这将打开popup窗口。

 window.showModalDialog = function (url, arg, feature) { var opFeature = feature.split(";"); var featuresArray = new Array() if (document.all) { for (var i = 0; i < opFeature.length - 1; i++) { var f = opFeature[i].split("="); featuresArray[f[0]] = f[1]; } } else { for (var i = 0; i < opFeature.length - 1; i++) { var f = opFeature[i].split(":"); featuresArray[f[0].toString().trim().toLowerCase()] = f[1].toString().trim(); } } var h = "200px", w = "400px", l = "100px", t = "100px", r = "yes", c = "yes", s = "no"; if (featuresArray["dialogheight"]) h = featuresArray["dialogheight"]; if (featuresArray["dialogwidth"]) w = featuresArray["dialogwidth"]; if (featuresArray["dialogleft"]) l = featuresArray["dialogleft"]; if (featuresArray["dialogtop"]) t = featuresArray["dialogtop"]; if (featuresArray["resizable"]) r = featuresArray["resizable"]; if (featuresArray["center"]) c = featuresArray["center"]; if (featuresArray["status"]) s = featuresArray["status"]; var modelFeature = "height = " + h + ",width = " + w + ",left=" + l + ",top=" + t + ",model=yes,alwaysRaised=yes" + ",resizable= " + r + ",celter=" + c + ",status=" + s; var model = window.open(url, "", modelFeature, null); model.dialogArguments = arg; } 

只要把这个代码放在页面的头部。

Answer 1

我把下面的JavaScript页面头，它似乎工作。 它检测浏览器何时不支持showModalDialog，并附加使用window.open的自定义方法，parsing对话框规格（高度，宽度，滚动等），以开启器为中心并将焦点设置回窗口（如果焦点丢失）。 此外，它使用URL作为窗口名称，以便每次都不打开一个新窗口。 如果你将窗口parameter passing给模态，你将需要编写一些额外的代码来解决这个问题。 popup窗口不是模态的，但至less你不必改变很多代码。 你的情况可能需要一些工作。

 <script type="text/javascript"> // fix for deprecated method in Chrome 37 if (!window.showModalDialog) { window.showModalDialog = function (arg1, arg2, arg3) { var w; var h; var resizable = "no"; var scroll = "no"; var status = "no"; // get the modal specs var mdattrs = arg3.split(";"); for (i = 0; i < mdattrs.length; i++) { var mdattr = mdattrs[i].split(":"); var n = mdattr[0]; var v = mdattr[1]; if (n) { n = n.trim().toLowerCase(); } if (v) { v = v.trim().toLowerCase(); } if (n == "dialogheight") { h = v.replace("px", ""); } else if (n == "dialogwidth") { w = v.replace("px", ""); } else if (n == "resizable") { resizable = v; } else if (n == "scroll") { scroll = v; } else if (n == "status") { status = v; } } var left = window.screenX + (window.outerWidth / 2) - (w / 2); var top = window.screenY + (window.outerHeight / 2) - (h / 2); var targetWin = window.open(arg1, arg1, 'toolbar=no, location=no, directories=no, status=' + status + ', menubar=no, scrollbars=' + scroll + ', resizable=' + resizable + ', copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left); targetWin.focus(); }; } </script> 

Answer 2

从http://codecorner.galanter.net/2014/09/02/reenable-showmodaldialog-in-chrome/

这是由devise不赞成。 您可以重新启用showModalDialog支持，但只能暂时使用 – 直到2015年5月。请使用此时间来创build替代解决scheme。

以下是Chrome for Windows的操作方法。 打开registry编辑器（regedit）并创build以下registry项：

HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome\EnableDeprecatedWebPlatformFeatures

在EnableDeprecatedWebPlatformFeatures项下，创build名称为1 ，值为ShowModalDialog_EffectiveUntil20150430的string值。 要validation策略是否已启用，请访问chrome：//策略URL。

---

更新：如果上述不适合你这里是另一种方法来尝试。

1. 从http://www.chromium.org/administrators/policy-templates下载Chrome ADM模板
2. 提取并导入与您的语言环境相关的策略（例如windows \ adm \ en-US \ chrome.adm）您可以通过gpedit.msc或在家庭版的Windows上使用这些实用程序导入： http : //blogs.technet.com/ b / fdcc / archive / 2008/05/07 / lgpo-utilities.aspx ）
3. 在“pipe理模板”下findGoogle Chrome模板并启用“启用弃用Web平台Feautes”。
4. 打开function并添加“ShowModalDialog_EffectiveUntil20150430”键。

Answer 3

这篇文章（ 为什么不推荐使用window.showModalDialog？代替使用？ ）似乎暗示showModalDialog已被弃用。

Answer 4

这里提供了一个非常好的工作JavaScript解决scheme： https ： //github.com/niutech/showModalDialog

我个人使用它，像其他浏览器一样工作，它为Chrome浏览器创build一个新的对话框。

这里是一个如何使用它的例子：

 function handleReturnValue(returnValue) { if (returnValue !== undefined) { // do what you want } } var myCallback = function (returnValue) { // callback for chrome usage handleReturnValue(returnValue); }; var returnValue = window.showModalDialog('someUrl', 'someDialogTitle', 'someDialogParams', myCallback); handleReturnValue(returnValue); // for other browsers except Chrome 

Answer 5

我不会尝试暂时启用弃用的function。 根据showModalDialog的MDN文档， Github上已经有了一个polyfill。

我只是使用它来将windows.showModalDialog作为用户脚本添加到旧版企业应用程序中，但是如果您有权访问源代码，则显然也可以将其添加到HTML的头部。

Answer 6

我使用了一个似乎做得很好的polyfill。

https://github.com/niutech/showModalDialog

http://niutech.github.io/showModalDialog/demo.html

Answer 7

创build一个跨浏览器的ModalDialog

 function _showModalDialog(url, width, height, closeCallback) { var modalDiv, dialogPrefix = window.showModalDialog ? 'dialog' : '', unit = 'px', maximized = width === true || height === true, w = width || 600, h = height || 500, border = 5, taskbar = 40, // windows taskbar header = 20, x, y; if (maximized) { x = 0; y = 0; w = screen.width; h = screen.height; } else { x = window.screenX + (screen.width / 2) - (w / 2) - (border * 2); y = window.screenY + (screen.height / 2) - (h / 2) - taskbar - border; } var features = [ 'toolbar=no', 'location=no', 'directories=no', 'status=no', 'menubar=no', 'scrollbars=no', 'resizable=no', 'copyhistory=no', 'center=yes', dialogPrefix + 'width=' + w + unit, dialogPrefix + 'height=' + h + unit, dialogPrefix + 'top=' + y + unit, dialogPrefix + 'left=' + x + unit ], showModal = function (context) { if (context) { modalDiv = context.document.createElement('div'); modalDiv.style.cssText = 'top:0;right:0;bottom:0;left:0;position:absolute;z-index:50000;'; modalDiv.onclick = function () { if (context.focus) { context.focus(); } return false; } window.top.document.body.appendChild(modalDiv); } }, removeModal = function () { if (modalDiv) { modalDiv.onclick = null; modalDiv.parentNode.removeChild(modalDiv); modalDiv = null; } }; // IE if (window.showModalDialog) { window.showModalDialog(url, null, features.join(';') + ';'); if (closeCallback) { closeCallback(); } // Other browsers } else { var win = window.open(url, '', features.join(',')); if (maximized) { win.moveTo(0, 0); } // When charging the window. var onLoadFn = function () { showModal(this); }, // When you close the window. unLoadFn = function () { window.clearInterval(interval); if (closeCallback) { closeCallback(); } removeModal(); }, // When you refresh the context that caught the window. beforeUnloadAndCloseFn = function () { try { unLoadFn(); } finally { win.close(); } }; if (win) { // Create a task to check if the window was closed. var interval = window.setInterval(function () { try { if (win == null || win.closed) { unLoadFn(); } } catch (e) { } }, 500); if (win.addEventListener) { win.addEventListener('load', onLoadFn, false); } else { win.attachEvent('load', onLoadFn); } window.addEventListener('beforeunload', beforeUnloadAndCloseFn, false); } } } 

Answer 8

不推荐使用window.showModalDialog（意图删除：window.showModalDialog（），从Web平台删除showModalDialog）。 最新的计划是将Chromium 37中的showModalDialog移除。这意味着Opera 24和Chrome 37中的这个function将不复存在，这两个function都将在九月份发布。[…]

Answer 9

是的，这是弃用的。 花了昨天重写代码来使用Window.open和PostMessage。

Answer 10

  (function() { window.spawn = window.spawn || function(gen) { function continuer(verb, arg) { var result; try { result = generator[verb](arg); } catch (err) { return Promise.reject(err); } if (result.done) { return result.value; } else { return Promise.resolve(result.value).then(onFulfilled, onRejected); } } var generator = gen(); var onFulfilled = continuer.bind(continuer, 'next'); var onRejected = continuer.bind(continuer, 'throw'); return onFulfilled(); }; window.showModalDialog = window.showModalDialog || function(url, arg, opt) { url = url || ''; //URL of a dialog arg = arg || null; //arguments to a dialog opt = opt || 'dialogWidth:300px;dialogHeight:200px'; //options: dialogTop;dialogLeft;dialogWidth;dialogHeight or CSS styles var caller = showModalDialog.caller.toString(); var dialog = document.body.appendChild(document.createElement('dialog')); dialog.setAttribute('style', opt.replace(/dialog/gi, '')); dialog.innerHTML = '<a href="#" id="dialog-close" style="position: absolute; top: 0; right: 4px; font-size: 20px; color: #000; text-decoration: none; outline: none;">&times;</a><iframe id="dialog-body" src="' + url + '" style="border: 0; width: 100%; height: 100%;"></iframe>'; document.getElementById('dialog-body').contentWindow.dialogArguments = arg; document.getElementById('dialog-close').addEventListener('click', function(e) { e.preventDefault(); dialog.close(); }); dialog.showModal(); //if using yield if(caller.indexOf('yield') >= 0) { return new Promise(function(resolve, reject) { dialog.addEventListener('close', function() { var returnValue = document.getElementById('dialog-body').contentWindow.returnValue; document.body.removeChild(dialog); resolve(returnValue); }); }); } //if using eval var isNext = false; var nextStmts = caller.split('\n').filter(function(stmt) { if(isNext || stmt.indexOf('showModalDialog(') >= 0) return isNext = true; return false; }); dialog.addEventListener('close', function() { var returnValue = document.getElementById('dialog-body').contentWindow.returnValue; document.body.removeChild(dialog); nextStmts[0] = nextStmts[0].replace(/(window\.)?showModalDialog\(.*\)/g, JSON.stringify(returnValue)); eval('{\n' + nextStmts.join('\n')); }); throw 'Execution stopped until showModalDialog is closed'; }; })() ; **Explanation: ------------** The best way to deal with showModalDialog for older application conversions is use to `https://github.com/niutech/showModalDialog` inorder to work with show modal dialogs and if modal dailog has ajax calls you need to create object and set the parameters of function to object and pass below...before that check for browser and set the useragent...example: agentStr = navigator.userAgent; and then check for chrome var objAcceptReject={}; // create empty object and set the parameters to object and send to the other functions as dialog when opened in chrome breaks the functionality function rejectClick(index, transferId) { objAcceptReject.index=index; objAcceptReject.transferId=transferId; agentStr = navigator.userAgent; var msie = ua.indexOf("MSIE "); if (msie > 0) // If Internet Explorer, return version number { var ret = window.showModalDialog("/abc.jsp?accept=false",window,"dialogHeight:175px;dialogWidth:475px;scroll:no;status:no;help:no"); if (ret=="true") { doSomeClick(index); } } else if ((agentStr.indexOf("Chrome")) >- 1){ spawn(function() { var ret = window.showModalDialog("/abcd.jsp?accept=false",window,"dialogHeight:175px;dialogWidth:475px;scroll:no;status:no;help:no"); if (ret=="true") {// create an object and store values in objects and send as parameters doSomeClick(objAcceptReject.index); } }); } else { var ret = window.showModalDialog("/xtz.jsp?accept=false",window,"dialogHeight:175px;dialogWidth:475px;scroll:no;status:no;help:no"); if (ret=="true") { doSomeClick(index); } }