当网站安装为 PWA 时，如何在 Microsoft Edge 中启用 javascript 警报和确认框？

Question

我正在测试使用新的 Windows 10 支持 (https://blogs.windows.com/msedgedev/2018/02/06/welcoming-progressive-web-apps-edge-windows-10/#La19KKkTBKLj90k8.97 ) 的渐进式 Web 应用程序的安装。

我生成了一个 AppX 程序包，然后将其本地安装在我的 PC 上。 PWA 开始于一个无界面的 Edge window.

一切正常，除了 javascript 完全忽略的确认和警告框。

在 Android 中作为 PWA 安装的完全相同的 webapp 工作正常，带有工作警报和确认框。

如何启用这些盒子？

Answer 1

最后我不得不辞职不再使用 alert() 和 confirm()。

我刚刚做了两个简单的函数来替换标准函数：

  function async_alert(message) {
     $("body").append("<div class='alert-box'>\
           <div class='alert-surface'>\
              <h2>Alert</h2></header>\
              <p>" + message + "</p>\
              <button type='button' class='alert-remove'>OK</button>\
           </div>\
           <div class='alert-backdrop'></div>\
        </div>");
     $(".alert-remove").off("click").on("click", function() { $(".alert-box").remove(); });
  }

  function async_confirm(message, onAcceptFunction) {
        $("body").append("<div class='confirm-box'>\
           <div class='confirm-surface'>\
              <h2>Confirm</h2>\
              <p>" + message + "</p>\
              <button type='button' class='confirm-remove'>Cancel</button>\
              <button type='button' class='confirm-accept'>OK</button>\
           </div>\
           <div class='confirm-backdrop'></div>\
        </div>");
     $(".confirm-remove").off("click").on("click", function() { $(".confirm-box").remove(); });
     $(".confirm-accept").off("click").on("click", onAcceptFunction);
  }

您应该调整样式，使 .alert-box div 完全覆盖 view-port 并且 .alert-surface div 成为包含信息的居中矩形。例如：

  .alert-box, .confirm-box {
     position: fixed;
     top: 0;
     left: 0;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 100%;
     z-index: 100000;
     display: flex;
     align-items: flex-start;
  }

  .alert-surface, .confirm-surface {
     opacity: 1;
     visibility: visible;
     box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
     background-color: #fff;
     display: inline-flex;
     flex-direction: column;
     width: calc(100% - 30px);
     max-width: 865px;
     transform: translateY(50px) scale(.8);
     border-radius: 2px;
  }

  .alert-backdrop, .confirm-backdrop {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0,0,0,.87);
     opacity: .3;
     z-index: -1;
  }

您可以像使用原始 alert() 函数一样使用 async_alert()，但请记住，这个新定义的函数只是异步的，而另一个是同步的（因此它不会停止您的运行时javascript 执行等待您的点击）。

您还可以替换标准的浏览器警报功能：

window.alert = async_alert;

要使用 async_confirm() 函数，您应该稍微更改您的代码：

if(confirm("Do something?") {
   console.log("I'm doing something");
}

至：

async_confirm("Do something?", function() {
      console.log("I'm doing something");
   });

再次注意，与标准的 confirm() 相比，async_confirm() 是一个异步函数。

当网站安装为 PWA 时，如何在 Microsoft Edge 中启用 javascript 警报和确认框？

How to enable javascript alert and confirm boxes in Microsoft Edge when a website installed as PWA?

javascript

alert

microsoft-edge

progressive-web-apps

confirm