Преглед изворни кода

查询机将iframe嵌套的地址改为使用webview,webview添加监听实现,更新界面

zhoupeng пре 1 година
родитељ
комит
b447d022bc
5 измењених фајлова са 51 додато и 9 уклоњено
  1. 2 2
      package-lock.json
  2. 2 1
      src/background.js
  3. 28 2
      src/views/Guidance.vue
  4. 18 3
      src/views/Progress.vue
  5. 1 1
      src/views/WindowLayout.vue

+ 2 - 2
package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cxj-client",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "cxj-client",
-      "version": "0.1.2",
+      "version": "0.1.3",
       "hasInstallScript": true,
       "dependencies": {
         "axios": "^0.27.2",

+ 2 - 1
src/background.js

@@ -29,7 +29,8 @@ async function createWindow() {
             nodeIntegration: true,
             // preload: path.join(__dirname, 'preload.js'),
             contextIsolation: false,
-            plugins:true
+            plugins:true,
+            webviewTag:true
         }
     })
 

+ 28 - 2
src/views/Guidance.vue

@@ -5,8 +5,19 @@
         <img src="images/title-bszn.png" alt=""><span>办事指南</span>
       </div>
       <div class="content-content" style="text-align: center;">
-        <iframe id="mainIframe" name="mainIframe" :src="url" frameborder="no" border="0" marginwidth="0" marginheight="0"
-          allowtransparency="yes" sandbox="allow-same-origin allow-scripts allow-forms"></iframe>
+        <!-- <iframe id="mainIframe" name="mainIframe" :src="url" frameborder="no" border="0" marginwidth="0" marginheight="0"
+          allowtransparency="yes" sandbox="allow-same-origin allow-scripts allow-forms"></iframe> -->
+
+        <!-- <iframe id="mainIframe" name="mainIframe" :src="url" frameborder="no" border="0" marginwidth="0" marginheight="0"
+          allowtransparency="yes"></iframe> -->
+
+        <!-- <WebView id="mainWebView" autosize="on" :src="url">
+          <iframe id="mainIframe" name="mainIframe" :src="url" frameborder="no" border="0" marginwidth="0"
+            marginheight="0" allowtransparency="yes" sandbox="allow-forms allow-modals allow-scripts allow-same-origin">
+          </iframe>
+        </WebView> -->
+        <webview id="mainWebView" autosize="on" :src="url"></webview>
+
       </div>
     </div>
   </div>
@@ -21,6 +32,13 @@ export default {
     }
   },
   mounted() {
+    /** 监听webview中调出新窗口,并刷新当前窗口 */
+    document.querySelector("#mainWebView").addEventListener('new-window', (e) => {
+      this.url=e.url
+      document.querySelector("#mainWebView").reload()
+    })
+
+
     //设置多少秒跳转
     var mtReturnTime = 120;
     //剩余秒数
@@ -69,4 +87,12 @@ export default {
   border-radius: 1.25rem;
   background-color: white;
 }
+
+#mainWebView {
+  width: 100%;
+  height: 100%;
+  border: 0.0625rem solid #B3D4FF;
+  border-radius: 1.25rem;
+  background-color: white;
+}
 </style>

+ 18 - 3
src/views/Progress.vue

@@ -5,9 +5,10 @@
         <img src="images/title-jdcx.png" alt=""><span>进度查询</span>
       </div>
       <div class="content-content">
-        <iframe id="mainIframe" name="mainIframe" :src="url" frameborder="no" border="0" marginwidth="0" marginheight="0"
-          allowtransparency="yes" sandbox="allow-same-origin allow-scripts allow-forms"></iframe>
-      </div>
+        <!-- <iframe id="mainIframe" name="mainIframe" :src="url" frameborder="no" border="0" marginwidth="0" marginheight="0"
+          allowtransparency="yes" sandbox="allow-same-origin allow-scripts allow-forms"></iframe> -->
+          <webview id="mainWebView" autosize="on" :src="url"></webview>
+        </div>
     </div>
   </div>
 </template>
@@ -26,6 +27,12 @@ export default {
     }
   },
   mounted() {
+    /** 监听webview中调出新窗口,并刷新当前窗口 */
+    document.querySelector("#mainWebView").addEventListener('new-window', (e) => {
+      this.url=e.url
+      document.querySelector("#mainWebView").reload()
+    })
+    
     //设置多少秒跳转
     var mtReturnTime = 120;
     //剩余秒数
@@ -73,4 +80,12 @@ export default {
   border: 0.0625rem solid #B3D4FF;
   border-radius: 1.25rem;
 }
+
+#mainWebView {
+  width: 100%;
+  height: 100%;
+  border: 0.0625rem solid #B3D4FF;
+  border-radius: 1.25rem;
+  background-color: white;
+}
 </style>

+ 1 - 1
src/views/WindowLayout.vue

@@ -106,7 +106,7 @@ export default {
 
 .type-ckbj .content-content {
   position: relative;
-  background: rgb(0, 0, 0, 0.2);
+  background: rgb(0, 0, 0, 0.4);
 }
 
 .taps-left {