javascript - ejemplos - ¿Cómo puedo hacer que window.showmodaldialog funcione en Chrome 37?

showmodaldialog javascript ejemplos

Question

Tenemos una gran aplicación web donde usamos window.showmodaldialog para alertas, confirmaciones y ventanas emergentes. Desde la versión 37 de Chrome, esta llamada se ha deshabilitado.

¿Hay alguna solución rápida para hacer que window.showmodaldialog funcione en la última versión de Chrome?

Estoy agregando aquí una solución para window.showmodaldialog, aunque esto no es una solución perfecta porque esto no romperá la ejecución del código como lo estaba haciendo showmodaldialog, sino que abrirá las ventanas emergentes.

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;

    }

Simplemente ponga este código en la sección principal de la página.

Answer 1

Window.showModalDialog está en desuso (intento de eliminar: window.showModalDialog (), eliminación de showModalDialog de la plataforma web). [...] El último plan es conseguir la eliminación de showModalDialog en Chromium 37. Esto significa que la característica se habrá ido en Opera 24 y Chrome 37, y ambos se lanzarán en septiembre. [...]

Answer 2

Crear un navegador cruzado 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 3

Aquí se proporciona una muy buena y funcional solución de JavaScript: https://github.com/niutech/showModalDialog

Personalmente lo uso, funciona como antes para otro navegador y crea un nuevo cuadro de diálogo para el navegador Chrome.

Aquí hay un ejemplo sobre cómo usarlo:

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 4

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

Está desaprobado por diseño. Puede volver a habilitar el soporte de showModalDialog, pero solo temporalmente, hasta mayo de 2015. Aproveche este tiempo para crear soluciones alternativas.

A continuación, se indica cómo hacerlo en Chrome para Windows. Abra el Editor del Registro (regedit) y cree la siguiente clave:

HKEY_LOCAL_MACHINE/SOFTWARE/Policies/Google/Chrome/EnableDeprecatedWebPlatformFeatures

En la clave EnableDeprecatedWebPlatformFeatures cree un valor de cadena con el nombre 1 y el valor de ShowModalDialog_EffectiveUntil20150430 . Para verificar que la política esté habilitada, visite chrome: // policy URL.

ACTUALIZACIÓN: Si lo anterior no funcionó para usted, aquí hay otro método para probar.

1. Descargue las plantillas de Chrome ADM desde http://www.chromium.org/administrators/policy-templates
2. Extraiga e importe la política relevante para su localidad (por ejemplo, windows / adm / en-US / chrome.adm. Puede importar a través de gpedit.msc o utilizar estas utilidades en las ediciones Home de Windows: http://blogs.technet.com/b/fdcc/archive/2008/05/07/lgpo-utilities.aspx )
3. Debajo de "Plantillas administrativas" ubique la plantilla de Google Chrome y habilite "Habilitar desaprobados de la plataforma web Feautes".
4. Abra la función y agregue la clave "ShowModalDialog_EffectiveUntil20150430".

Answer 5

Este artículo ( ¿Por qué window.showModalDialog está en desuso? ¿Qué usar en su lugar? ) Parece sugerir que showModalDialog ha quedado en desuso.

Answer 6

No trataría de habilitar temporalmente una función en desuso. De acuerdo con la documentación de MDN para showModalDialog , ya hay un polyfill https://github.com/niutech/showModalDialog .

Acabo de utilizarlo para agregar windows.showModalDialog a una aplicación empresarial heredada como un userscript, pero obviamente también puede agregarlo en el encabezado del HTML si tiene acceso a la fuente.

Answer 7

Puse el siguiente javascript en el encabezado de la página y parece funcionar. Detecta cuando el navegador no admite showModalDialog y adjunta un método personalizado que usa window.open, analiza las especificaciones del diálogo (alto, ancho, desplazamiento, etc.), se centra en el abridor y vuelve a enfocar la ventana (si se pierde el foco) ) Además, usa la URL como el nombre de la ventana para que no se abra una nueva ventana cada vez. Si está pasando argumentos de ventana al modal, tendrá que escribir algún código adicional para solucionarlo. La ventana emergente no es modal, pero al menos no tienes que cambiar una gran cantidad de código. Podría necesitar algo de trabajo para sus circunstancias.

<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 8

Sí, está en desuso. Pasé ayer reescribiendo código para usar Window.open y PostMessage en su lugar.

Answer 9

Uso un poliufrillo que parece hacer un buen trabajo.

https://github.com/niutech/showModalDialog

niutech.github.io/showModalDialog/demo.html

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