electron在远程页面中调用自定义的confirm

1.自定义confirm，使用elementui的默认弹出框，只用样式。

<div tabindex="-1"role="dialog"aria-modal="true"aria-label="提示"class="el-message-box__wrapper"style="z-index: 2024;"><div class="el-message-box confirm-dialog--ew"><div class="el-message-box__header"><div class="el-message-box__title"><span>提示</span></div><button type="button"aria-label="Close" onclick="window._myclose(false);"  class="el-message-box__headerbtn"><i class="el-message-box__close el-icon-close"></i></button></div><div class="el-message-box__content"><div class="el-message-box__container"><div class="el-message-box__status el-icon-warning"></div><div class="el-message-box__message"><p>报告发生变化，是否保存？</p></div></div><div class="el-message-box__input"style="display: none;"><div class="el-input"><input type="text"autocomplete="off"placeholder=""class="el-input__inner"></div><div class="el-message-box__errormsg"style="visibility: hidden;"></div></div></div><div class="el-message-box__btns"><button type="button"class="el-button el-button--default el-button--small" onclick="window._myclose(false);"><span>取消</span></button><button type="button" onclick="window._myclose(true);" class="el-button el-button--default el-button--small el-button--primary "><span>确定</span></button></div></div></div><div class="v-modal"tabindex="0"style="z-index: 2023;"></div>

 

2.生成js

var win =new function(){ 
//方法必须是注册到window下不然在html加载时候无法识别
  window.win_close = function () {

        let wiframe = window.document.querySelector('.win iframe');

        let winn = window.document.querySelector('.win');

        if (wiframe != null && wiframe != undefined) {

            wiframe.remove();

        }

        if (winn != null && winn != undefined) {

            winn.remove();

        }

    };

   window.win_isFunction = function (v) {

        return typeof (v) == "function"

    }

 // 显示消息框

    function messageBox(html, title, message) { 

      window.document.querySelector('.el-message-box__title span').innerHTML=title;

        var contet=window.document.querySelector('.el-message-box__message p');

        contet.innerHTML= message.replace('\r\n', '<br/>');

    }

// 确认框
    this.confirm = function (title, message, selected) {
        window._myclose = function (r) {
            window.win_close();
            if (window.win_isFunction(selected)) selected(r);
        };
        window.win_close();
        var confirmWrap = window.document.createElement("div");      
       confirmWrap.classList.add('win');    
       var html='<div tabindex="-1"role="dialog"aria-modal="true"aria-label="提示"class="el-message-box__wrapper"style="z-index: 2024;"><div class="el-message-box confirm-dialog--ew"><div class="el-message-box__header"><div class="el-message-box__title"><span>提示</span></div><button type="button"aria-label="Close" onclick="window._myclose(false);"  class="el-message-box__headerbtn"><i class="el-message-box__close el-icon-close"></i></button></div><div class="el-message-box__content"><div class="el-message-box__container"><div class="el-message-box__status el-icon-warning"></div><div class="el-message-box__message"><p>报告发生变化，是否保存？</p></div></div><div class="el-message-box__input"style="display: none;"><div class="el-input"><input type="text"autocomplete="off"placeholder=""class="el-input__inner"></div><div class="el-message-box__errormsg"style="visibility: hidden;"></div></div></div><div class="el-message-box__btns"><button type="button"class="el-button el-button--default el-button--small" onclick="window._myclose(false);"><span>取消</span></button><button type="button" onclick="window._myclose(true);" class="el-button el-button--default el-button--small el-button--primary "><span>确定</span></button></div></div></div><div class="v-modal"tabindex="0"style="z-index: 2023;"></div>'
       confirmWrap.innerHTML = html;
        window.document.body.appendChild(confirmWrap);
        messageBox(html, title, message);
    };
}

3.使用方法

window.onload = function () {
    win.confirm('系统提示', '系统不会保存您所做的更改,还要继续刷新页面？', (r) => { 
                        if (r == true) {
                            window.location.reload();
                        }
                    }) 
}