programing

창문은 어떻게 만드나요?크롬 37에서 쇼모델 대화상자 작동?

stoneblock 2023. 10. 11. 20:26

창문은 어떻게 만드나요?크롬 37에서 쇼모델 대화상자 작동?

는 를 한 웹 있습니다.window.showmodaldialog경고, 확인 및 팝업을 표시합니다.Chrome 버전 37 이후로 이 통화는 비활성화되어 있습니다.

를 할 수 빠른 ?window.showmodaldialog최신 버전의 Chrome에서 작동합니까?

윈도우에 대한 해결책을 여기에 추가합니다.showmodal 대화 상자는 완벽한 해결책은 아니지만, 이것이 showmodal 대화 상자가 하던 것처럼 코드 실행을 방해하지는 않을 것이기 때문에 대신 팝업이 열립니다.

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;

    }

이 코드를 페이지 머리 부분에 넣으시면 됩니다.

페이지 헤더에 다음과 같은 자바스크립트를 넣었더니 되는 것 같습니다.브라우저가 showModalDialog를 지원하지 않는 경우를 감지하고 window.open을 사용하는 사용자 지정 메소드를 첨부합니다. 대화 사양(높이, 너비, 스크롤 등)을 파싱하고 중앙 따개를 열고 포커스를 다시 윈도우로 설정합니다(포커스가 손실된 경우).또한 URL을 창 이름으로 사용하여 매번 새로운 창이 열리지 않도록 합니다.창 아르그를 모달에 전달하는 경우 이를 수정하기 위해 추가 코드를 작성해야 합니다.팝업이 modal은 아니지만 적어도 코드를 많이 변경할 필요는 없습니다.당신의 상황에 맞는 일이 필요할 수도 있습니다.

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

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

설계상 감가상각됩니다.showModalDialog 지원은 2015년 5월까지 일시적으로만 다시 활성화할 수 있습니다.이 시간을 이용해 대체 솔루션을 만듭니다.

다음은 윈도우용 크롬으로 하는 방법입니다.레지스트리 편집기(regedit)를 열고 다음 키를 만듭니다.

HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome\EnableDeprecatedWebPlatformFeatures

밑에EnableDeprecatedWebPlatformFeatures 키를 값 1의 가치와.ShowModalDialog_EffectiveUntil20150430 . 하려면 chrome://policy URL 합니다.


업데이트: If the above didn’t work for you here’s another method to try.

  1. http://www.chromium.org/administrators/policy-templates 에서 Chrome ADM 템플릿 다운로드
  2. 로케일과 관련된 정책(예: window\adm\en-US\chrome.adm)을 추출하고 가져옵니다.다음 중 하나를 통해 가져올 수 있습니다.gpedit.msc또는 홈 에디션 윈도우에서 이러한 유틸리티를 사용합니다. http://blogs.technet.com/b/fdcc/archive/2008/05/07/lgpo-utilities.aspx)
  3. "관리 템플릿"에서 Google Chrome 템플릿을 찾은 후 "사용하지 않는 웹 플랫폼 기능 사용"을 설정합니다.
  4. 기능을 열고 "ShowModalDialog_EffectiveTo20150430 ″ 키"를 추가합니다.

매우 훌륭하고 효과적인 자바스크립트 솔루션이 여기에 제공됩니다. https://github.com/niutech/showModalDialog

저는 개인적으로 사용했고, 다른 브라우저에서도 이전과 같이 작동하며 크롬 브라우저를 위한 새로운 대화상자를 만듭니다.

사용 방법에 대한 예는 다음과 같습니다.

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

이 기사 (왜 window인가요?showModalDialDialog가 더 이상 사용되지 않음? 대신 무엇을 사용할 것입니까?) showModalDialog가 더 이상 사용되지 않음을 시사하는 것 같습니다.

더 이상 사용하지 않는 기능을 일시적으로 사용하도록 설정하지는 않습니다.showModalDialog의 MDN 문서에 따르면 Github에는 이미 폴리필(polyfill)이 있습니다.

그냥 그걸 이용해서 추가한 겁니다.windows.showModalDialog사용자 스크립트로 레거시 엔터프라이즈 응용 프로그램에 추가할 수 있지만 소스에 액세스할 수 있는 경우 HTML 머리 부분에 추가할 수도 있습니다.

window.returnValue 속성은 window.open()을 사용하여 window를 열 때는 직접 작동하지 않지만 window.open()을 사용할 때는 작동합니다.showModalDialog()

따라서 여러분의 경우에는 여러분이 시도하고 있는 것을 달성할 수 있는 두 가지 옵션이 있습니다.

옵션 1 - 창 사용.showModalDialog()

상위 페이지에서

var answer = window.showModalDialog(<your page and other arguments>)
if (answer == 1)
 { do some thing with answer }

자식 페이지 안에서 창을 사용할 수 있습니다. return 값은 직접적으로 다음과 같습니다.

window.returnValue = 'value that you want to return';

showModalDialog 대화상자가 닫힐 때까지 JavaScript 실행을 중지하고 대화상자가 닫힐 때 열린 대화상자에서 반환 값을 가져올 수 있습니다.그러나 showModalDialog의 문제점은 많은 최신 브라우저에서 지원되지 않는다는 것입니다.contrast window.open은 비동기적으로 창을 엽니다(사용자는 상위 창과 열린 창 모두에 액세스할 수 있음).그리고 자바스크립트 실행은 즉시 계속될 것입니다.옵션 2로 안내합니다.

옵션 2 - window.open()사용하여 상위 페이지에 대화 상자 열기를 다루는 함수를 작성합니다.

function openDialog(url, width, height, callback){
if(window.showModalDialog){
    options = 'dialogHeight: '+ height + '; dialogWidth: '+ width + '; scroll=no'
    var returnValue = window.showModalDialog(url,this,options);
    callback(returnValue)
}
else {
    options ='toolbar=no, directories=no, location=no, status=yes, menubar=no, resizable=yes, scrollbars=no, width=' + width + ', height=' + height; 
        var childWindow = window.open(url,"",options);
        $(childWindow).on('unload',function(){
            if (childWindow.isOpened == null) {
                childWindow.isOpened = 1;
            }
            else {
                if(callback){
                    callback(childWindow.returnValue);
                }
            }
        });
}

}

사용할 때마다 대화상자를 엽니다.반환 값을 다루는 콜백을 작성하고 이를 매개 변수로 전달하여 열기Dialog 함수

function callback(returnValue){
if(returnValue){
    do something nice with the returnValue
}}

그리고 그 기능을 호출할 때.

openDialog(<your page>, 'width px', 'height px', callbak);

윈도우 교체 방법에 대한 기사를 확인해 보세요.showModal창이 있는 대화상자.open

저는 폴리필을 사용해서 잘 할 수 있을 것 같습니다.

https://github.com/niutech/showModalDialog

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

크로스 브라우저 모드 대화상자 만들기

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

창문이.showModalDialog is decreated(제거 의도: 창).showModalDialog(), 웹 플랫폼에서 showModalDialog 제거).[...]최신 계획은 크롬 37에 showModalDialog 제거를 착륙시키는 것입니다.이는 오페라 24와 크롬 37에서 기능이 사라짐을 의미하며, 이 둘은 9월에 출시되어야 합니다.[...]

네, 더 이상 사용하지 않습니다.Window.open 및 Post Message를 대신 사용하기 위해 코드를 다시 작성하는 데 어제를 보냈습니다.

언급URL : https://stackoverflow.com/questions/25663053/how-can-i-make-window-showmodaldialog-work-in-chrome-37