嵌入更多的 web 内容

2026-06-13 19:18:15 +08:00 · 2021-10-11 16:07:59 +08:00
parent fc5fc9824a
commit 0933f53465
6 changed files with 142 additions and 8 deletions
--- a/asset/view_example.html
+++ b/asset/view_example.html
@@ -0,0 +1,22 @@
+<html>
+ <head> 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <style type="text/css">
+    body{
+      margin:0px auto;
+    }
+    #content {
+      position: absolute;
+      left: 50%;
+      top: 35%;
+      transform: translate(-50%, -50%);
+    }
+  </style> 
+  <title></title> 
+ </head> 
+ <body> 
+  <div id="content">
+    这里是 BrowserView 加载的html内容
+  </div>  
+ </body>
+</html>
--- a/electron/ipc/example.js
+++ b/electron/ipc/example.js
@@ -9,9 +9,11 @@
 * @param arg 接收到的消息
 */

-const {dialog} = require('electron');
+const {app, dialog, BrowserWindow, BrowserView} = require('electron');
+const path = require('path');

 let myTimer = null;
+let browserViewObj = null;

 exports.hello = function (event, channel, msg) {
  let newMsg = msg + " +1"
@@ -42,7 +44,7 @@ exports.messageShowConfirm = function (event, channel, arg) {
    buttons: ['确认', '取消'], // 按钮及索引
  })
  let data = (res === 0) ? '点击确认按钮' : '点击取消按钮';
-  console.log('[electron] [example] [messageShowConfirm] 结果:', res, );
+  console.log('[electron] [ipc] [example] [messageShowConfirm] 结果:', res, );

  return data;
 }
@@ -68,4 +70,35 @@ exports.socketMessageStart = function (event, channel, arg) {
 exports.socketMessageStop = function () {
  clearInterval(myTimer);
  return '停止了'
+}
+
+/**
+ * 加载视图内容
+ */
+exports.loadViewContent = function (event, channel, arg) {
+  let content = null;
+  if (arg.type == 'html') {
+    content = path.join('file://', app.getAppPath(), arg.content)
+  } else {
+    content = arg.content;
+  }
+  
+  browserViewObj = new BrowserView();
+  MAIN_WINDOW.setBrowserView(browserViewObj)
+  browserViewObj.setBounds({
+    x: 300,
+    y: 80,
+    width: 650,
+    height: 480
+  });
+  browserViewObj.webContents.loadURL(content);
+  return true
+}
+
+/**
+ * 移除视图内容
+ */
+exports.removeViewContent = function () {
+  MAIN_WINDOW.removeBrowserView(browserViewObj);
+  return true
 }
--- a/frontend/src/config/router.config.js
+++ b/frontend/src/config/router.config.js
@@ -28,6 +28,11 @@ export const constantRouterMap = [
            name: 'DemoSocketIndex',
            component: () => import('@/views/demo/socket/Index')
          },
+          {
+            path: '/demo/windowview/index',
+            name: 'DemoWindowViewIndex',
+            component: () => import('@/views/demo/windowview/Index')
+          },
          {
            path: '/demo/shortcut/index',
            name: 'DemoShortcutIndex',
--- a/frontend/src/layouts/DemoMenu.vue
+++ b/frontend/src/layouts/DemoMenu.vue
@@ -4,7 +4,7 @@
      theme="light"
      class="layout-sider"
    >
-      <a-menu class="sub-menu-item" theme="light" mode="inline" :default-selected-keys="['menu_100']">
+      <a-menu theme="light" mode="inline" :default-selected-keys="['menu_100']">
        <a-menu-item v-for="(menuInfo, subIndex) in menu" :key="subIndex">
          <router-link :to="{ name: menuInfo.pageName, params: menuInfo.params}">
            <span>{{ menuInfo.title }}</span>
@@ -36,6 +36,12 @@ export default {
          pageName: 'DemoSocketIndex',
          params: {}
        },
+        'menu_400' : {
+          icon: 'profile',
+          title: '视图',
+          pageName: 'DemoWindowViewIndex',
+          params: {}
+        },
        'menu_500' : {
          icon: 'profile',
          title: '软件',
@@ -59,7 +65,7 @@ export default {
          title: '测试',
          pageName: 'DemoTestApiIndex',
          params: {}
-        },
+        }                                                 
      }
    };
  },
@@ -84,6 +90,7 @@ export default {
    border-top: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    background-color: #FAFAFA;
+    overflow: auto;
  }
 }
 </style>
--- a/frontend/src/views/demo/windowview/Index.vue
+++ b/frontend/src/views/demo/windowview/Index.vue
@@ -0,0 +1,67 @@
+<template>
+  <div id="app-demo-window-view">
+    <div class="one-block-1">
+      <span>
+        1. 嵌入更多的 web 内容
+      </span>
+    </div>  
+    <div class="one-block-2">
+      <a-space>
+        <a-button @click="loadViewContent(0)">加载百度页面</a-button>
+        <a-button @click="removeViewContent(0)">移除百度页面</a-button>
+        <a-button @click="loadViewContent(1)">加载html页面</a-button>
+        <a-button @click="removeViewContent(1)">移除html页面</a-button>
+      </a-space>
+    </div>
+    <div class="one-block-2">
+      <template></template>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  data() {
+    return {
+      views: [
+        {
+          type: 'web',
+          content: 'https://www.baidu.com/'
+        },
+        {
+          type: 'html',
+          content: '/asset/view_example.html'
+        },        
+      ],
+    };
+  },
+  methods: {
+    loadViewContent (index) {
+      const self = this;
+      self.$ipcCallMain('example.loadViewContent', this.views[index]).then(r => {
+        console.log(r);
+      })
+    },
+    removeViewContent (index) {
+      const self = this;
+      self.$ipcCallMain('example.removeViewContent', self.views[index]).then(r => {
+        console.log(r);
+      })
+    },
+  }
+};
+</script>
+<style lang="less" scoped>
+#app-demo-window-view {
+  padding: 0px 10px;
+  text-align: left;
+  width: 100%;
+  .one-block-1 {
+    font-size: 16px;
+    padding-top: 10px;
+  }
+  .one-block-2 {
+    padding-top: 10px;
+  }
+}
+</style>
--- a/main.js
+++ b/main.js
@@ -5,10 +5,10 @@ const setup = require('./electron/setup')
 const electronConfig = require('./electron/config')
 const storage = require('./electron/lib/storage')
 const preferences = require('./electron/preferences')
-const helper = require('./electron/lib/helper');
+const helper = require('./electron/lib/helper')

 // main window
-global.MAIN_WINDOW = null
+global.MAIN_WINDOW = null;
 global.APP_TRAY = null;
 global.CAN_QUIT = false;

@@ -129,10 +129,10 @@ function loadingView (winOptions) {
    width: winOptions.width,
    height: winOptions.height
  });
-  loadingBrowserView.webContents.loadURL(loadingHtml);
+  loadingBrowserView.webContents.loadURL(loadingHtml)
  
  MAIN_WINDOW.webContents.on('dom-ready', async (event) => {
-    MAIN_WINDOW.removeBrowserView(loadingBrowserView);
+    MAIN_WINDOW.removeBrowserView(loadingBrowserView)
  });
 }