Como posso fazer o trabalho window.showmodaldialog no chrome 37?

Temos uma enorme aplicação web onde usamos window.showmodaldialog para alertas, confirmações e popups. Desde a versão 37 do Chrome, esta chamada foi desativada.

Existe alguma solução rápida para fazer o window.showmodaldialog funcionar na última versão do Chrome?

Eu estou adicionando aqui uma solução para window.showmodaldialog, embora isso não é uma solução perfeita, porque isso não vai quebrar a execução do código como showmodaldialog estava fazendo, em vez disso, abrirá os pop-ups.

 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; } 

Basta colocar esse código na seção principal da página.

Eu coloquei o seguinte javascript no header da página e parece funcionar. Ele detecta quando o navegador não suporta showModalDialog e anexa um método personalizado que usa window.open, analisa as especificações de diálogo (altura, largura, rolagem, etc.), centraliza o abridor e define o foco de volta para a janela (se o foco for perdido ). Além disso, ele usa a URL como o nome da janela para que uma nova janela não seja aberta a cada vez. Se você está passando argumentos da janela para o modal, você precisará escrever algum código adicional para corrigir isso. O pop-up não é modal, mas pelo menos você não precisa alterar muito código. Pode precisar de algum trabalho para as suas circunstâncias.

  

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

Está obsoleto por design. Você pode reativar o suporte showModalDialog, mas apenas temporariamente – até maio de 2015. Use esse tempo para criar soluções alternativas.

Veja como fazer isso no Chrome para Windows. Abra o Editor do Registro (regedit) e crie a seguinte chave:

HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome\EnableDeprecatedWebPlatformFeatures

Na chave EnableDeprecatedWebPlatformFeatures crie um valor de string com o nome 1 e o valor de ShowModalDialog_EffectiveUntil20150430 . Para verificar se a política está ativada, visite chrome: // policy URL.


ATUALIZAÇÃO: Se o acima não funcionou para você, aqui está outro método para tentar.

  1. Faça o download dos modelos do Chrome ADM em http://www.chromium.org/administrators/policy-templates
  2. Extraia e importe a política relevante para sua localidade (por exemplo, windows \ adm \ en-US \ chrome.adm. Você pode importar via gpedit.msc ou usando esses utilitários nas edições Home do Windows: http://blogs.technet.com/ b / fdcc / archive / 2008/05/07 / lgpo-utilities.aspx )
  3. Em “Modelos Administrativos”, localize o modelo do Google Chrome e ative “Ativar os Padrões de Web Descontinuados”.
  4. Abra o recurso e adicione a chave “ShowModalDialog_EffectiveUntil20150430 ″.

Este artigo ( Por que window.showModalDialog é obsoleto? O que usar em vez disso? ) Parece sugerir que showModalDialog foi preterido.

Uma solução de javascript muito boa e funcional é fornecida aqui: https://github.com/niutech/showModalDialog

Eu usei-o pessoalmente, funciona como antes para outro navegador e cria um novo diálogo para o navegador chrome.

Aqui está um exemplo de como usá-lo:

 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 

Eu não tentaria ativar temporariamente um recurso obsoleto. De acordo com a documentação do MDN para showModalDialog , já existe um polyfill disponível no Github .

Acabei de usar isso para adicionar o windows.showModalDialog a um aplicativo corporativo legado como um userscript, mas você também pode obviamente incluí-lo na cabeça do HTML se tiver access à origem.

Criar um cross browser 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); } } } 
  (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 = '×'; 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); } } 

O window.showModalDialog foi descontinuado (Intent to Remove: window.showModalDialog (), removendo showModalDialog da plataforma Web). […] O último plano é acertar a remoção do showModalDialog no Chromium 37. Isso significa que o recurso terá desaparecido no Opera 24 e Chrome 37, sendo que ambos devem ser lançados em setembro. […]

Sim, está obsoleto. Gastou ontem reescrevendo o código para usar Window.open e PostMessage.