在Electron新版本使用FaceID，iframe => webview

src/features/OnlineExam/Examing/FaceId.vue

@@ -37,7 +37,25 @@
           重试
         </button>
       </div>
-      <iframe
+      <webview
+        id="myFrame"
+        v-show="showIframe"
+        :preload="electronDir + 'manipulateFaceID.js'"
+        style="position:absolute;width:100%;height:710px;"
+      ></webview>
+      <!-- <iframe
+        src="https://www.baidu.com"
+      preload="./manipulateFaceID.js"
+      allow="camera *"
+      src="https://www.baidu.com"
+      allowusermedia
+      id="myFrame"
+      scrolling="no"
+      width="100%"
+      height="710px"
+      frameborder="0"
+    ></iframe> -->
+      <!-- <iframe
         v-show="showIframe"
         allow="camera *"
         allowusermedia
@@ -46,7 +64,7 @@
         width="100%"
         height="710px"
         frameborder="0"
-      ></iframe>
+      ></iframe> -->
     </div>
   </div>
 </template>
@@ -65,12 +83,19 @@ export default {
       redoBtnShow: false,
       timeCount: 60,
       redoBtnMsg: "",
+      electronDir: "",
     };
   },
   mounted() {
     console.debug("startFaceVerify");
     window._hmt.push(["_trackEvent", "活体检测弹出框", "弹出框"]);
     this.startFaceVerify();
+    if (typeof nodeRequire != "undefined") {
+      // console.log(nodeRequire("electron").remote.app);
+      const app = window.nodeRequire("electron").remote.app;
+      this.electronDir = "file://" + app.getAppPath() + "/";
+      console.log(this.electronDir);
+    }
   },
   beforeDestroy() {
     try {
@@ -80,6 +105,7 @@ export default {
     }
     clearTimeout(this.faceIdTime);
     clearInterval(this.timeCountInterval);
+    clearTimeout(this.iframeDomReadyTimeout);
   },
   methods: {
     showRedo(redoMsg) {
@@ -100,41 +126,41 @@ export default {
         { params: { errorMsg: errorMsg } }
       );
     },
-    checkIframeOnload() {
-      var iframe = document.getElementById("myFrame");
-      if (!iframe) {
-        return null;
-      }
-      var app = iframe.contentWindow.document.getElementById("app");
-      if (app) {
-        return "success";
-      } else {
-        var preLabel = iframe.contentWindow.document.getElementsByTagName(
-          "pre"
-        )[0];
-        if (
-          preLabel &&
-          preLabel.innerText &&
-          preLabel.innerText.indexOf("error_message") > -1
-        ) {
-          return preLabel.innerText;
-        }
-      }
-      return null;
-    },
+    // checkIframeOnload() {
+    //   var iframe = document.getElementById("myFrame");
+    //   if (!iframe) {
+    //     return null;
+    //   }
+    //   var app = iframe.contentWindow.document.getElementById("app");
+    //   if (app) {
+    //     return "success";
+    //   } else {
+    //     var preLabel = iframe.contentWindow.document.getElementsByTagName(
+    //       "pre"
+    //     )[0];
+    //     if (
+    //       preLabel &&
+    //       preLabel.innerText &&
+    //       preLabel.innerText.indexOf("error_message") > -1
+    //     ) {
+    //       return preLabel.innerText;
+    //     }
+    //   }
+    //   return null;
+    // },
     iframeLoadSuccess() {
       window._hmt.push([
         "_trackEvent",
         "活体检测弹出框",
         "FaceID页面iframe加载成功",
       ]);
-      try {
-        var iframe = document.getElementById("myFrame");
-        var app = iframe.contentWindow.document.getElementById("app");
-        app.querySelector(".footer").remove();
-      } catch (err) {
-        console.error(err);
-      }
+      // try {
+      //   var iframe = document.getElementById("myFrame");
+      //   var app = iframe.contentWindow.document.getElementById("app");
+      //   app.querySelector(".footer").remove();
+      // } catch (err) {
+      //   console.error(err);
+      // }
 
       const examRecordId = this.$route.params.examRecordDataId;
 
@@ -332,28 +358,68 @@ export default {
       } catch (err) {
         console.error(err);
       }
-      var index = 0;
-      var iframeLoadTime = setInterval(() => {
-        var iframeLoadMsg = this.checkIframeOnload();
-        if (!iframeLoadMsg) {
-          index++;
-          if (index == 20) {
-            //检测达到20次
-            clearInterval(iframeLoadTime);
+      // var index = 0;
+      // var iframeLoadTime = setInterval(() => {
+      //   var iframeLoadMsg = this.checkIframeOnload();
+      //   if (!iframeLoadMsg) {
+      //     index++;
+      //     if (index == 20) {
+      //       //检测达到20次
+      //       clearInterval(iframeLoadTime);
+      //       this.showRedo("网络异常，请手动点击重试");
+      //       window._hmt.push(["_trackEvent", "活体检测弹出框", "网络异常"]);
+      //     }
+      //   } else if (iframeLoadMsg.indexOf("error_message") > -1) {
+      //     clearInterval(iframeLoadTime);
+      //     this.updateFaceVerify(iframeLoadMsg, null);
+      //   } else if (iframeLoadMsg == "success") {
+      //     clearInterval(iframeLoadTime);
+      //     // this.iframeLoadSuccess();
+      //     setTimeout(() => {
+      //       this.iframeLoadSuccess();
+      //     }, 300); // 延迟确保能删除footer
+      //   }
+      // }, 500);
+
+      {
+        // iframe 状态管理
+        let iframeDomReady = false;
+        iframe.addEventListener("did-start-loading", () => {
+          console.log("loading faceid iframe");
+        });
+
+        iframe.addEventListener("did-fail-load", () => {
+          console.log("failed loading faceid iframe");
+        });
+
+        iframe.addEventListener("dom-ready", () => {
+          iframeDomReady = true;
+          console.log("faceid iframe dom ready");
+          // iframe.openDevTools();
+        });
+
+        iframe.addEventListener("ipc-message", event => {
+          // console.log(event.channel);
+          clearInterval(this.iframeDomReadyTimeout);
+          const iframeLoadMsg = event.channel;
+          if (iframeLoadMsg.indexOf("error_message") > -1) {
+            this.updateFaceVerify(iframeLoadMsg, null);
+          }
+          if (iframeLoadMsg === "success") {
+            this.iframeLoadSuccess();
+            iframe.send("faceid-footer", ".copyright");
+          }
+        });
+
+        // 网络异常，最后的管理
+        this.iframeDomReadyTimeout = setTimeout(() => {
+          if (iframeDomReady === false) {
+            clearTimeout(this.iframeDomReadyTimeout);
             this.showRedo("网络异常，请手动点击重试");
             window._hmt.push(["_trackEvent", "活体检测弹出框", "网络异常"]);
           }
-        } else if (iframeLoadMsg.indexOf("error_message") > -1) {
-          clearInterval(iframeLoadTime);
-          this.updateFaceVerify(iframeLoadMsg, null);
-        } else if (iframeLoadMsg == "success") {
-          clearInterval(iframeLoadTime);
-          // this.iframeLoadSuccess();
-          setTimeout(() => {
-            this.iframeLoadSuccess();
-          }, 300); // 延迟确保能删除footer
-        }
-      }, 500);
+        }, 60 * 1000);
+      }
     },
   },
 };