关于web中触发electron的新建弹出左右拓展屏幕窗口示例

首先在web页面制定几个按钮，用来触发electron，先判断是否处于环境中

// 判断当前是否是 electron 环境

const isElectron = typeof require !== 'undefined' && typeof process !== 'undefined' && process.versions.hasOwnProperty('electron');

//执行非 isElectron环境的操作，此处可有可无，配合业务拓展
 if(!isElectron )
        {
          
        }

  const urlArr = [
        `http：//你想跳转的网址`,
    ]
    
 <Button type="primary"  data-u={urlArr[0]}></Button>

electron中：

package.json：
{
  "name": "react",
  "version": "1.0.0",
  "description": "An Electron application with React",
  "main": "./out/main/index.js",
  "author": "example.com",
  "homepage": "https://www.electronjs.org",
  "scripts": {
    "format": "prettier --write .",
    "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
    "start": "electron-vite preview",
    "dev": "electron-vite dev",
    "build": "electron-vite build",
    "postinstall": "electron-builder install-app-deps",
    "build:win": "npm run build && electron-builder --win --config",
    "build:mac": "npm run build && electron-builder --mac --config",
    "build:linux": "npm run build && electron-builder --linux --config"
  },
  "dependencies": {
    "@electron-toolkit/preload": "^2.0.0",
    "@electron-toolkit/utils": "^1.0.2"
  },
  "devDependencies": {
    "@electron/notarize": "^1.2.3",
    "@vitejs/plugin-react": "^4.0.0",
    "electron": "^24.4.1",
    "electron-builder": "^23.6.0",
    "electron-vite": "^1.0.23",
    "eslint": "^8.42.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "prettier": "^2.8.8",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "vite": "^4.3.9"
  }
}

main,js

const { ip } = require ('./config/ipConfig')
const { app, BrowserWindow, ipcMain ,screen} = require('electron')

function getTargetDisplay(filter) {
  return [...screen.getAllDisplays()].filter(filter)
}

const getLeftDisplay = () => {
  const primaryDisplay = screen.getPrimaryDisplay()

  return getTargetDisplay(display => display.bounds.x < primaryDisplay.bounds.x)?.[0]
}
const getRightDisplay = () => {
  const primaryDisplay = screen.getPrimaryDisplay()

  return getTargetDisplay(display => display.bounds.x > primaryDisplay.bounds.x)?.[0]
}

const context = {
  mainWindow: null,
  leftWindow: null,
  rightWindow: null
}

const createWindow = (url, options) => {

  const win = new BrowserWindow({
    width: 1280,
    height: 720,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
    ...options
  })

  win.loadURL(url)

  return win

}

function injectHook(win) {
  const code = `
    console.log('[Hook] Electron hook initialed!')
    const { ipcRenderer } = require('electron')

    document.querySelectorAll('.maps-foot-r button').forEach((el, index) => {
      const pos = index !== 1 ? 'left-window' : 'right-window'

      const u = el.dataset?.u

      if ( !u ) return

      el.addEventListener('click', e => {
        e.preventDefault();

        ipcRenderer.send(pos, u)
        console.log('Click', pos, u)
      })
      
    })
  `

  const { webContents } = win

  webContents.executeJavaScript(code)
}

function initial() {
  context.mainWindow = createWindow('http://www.baidu.com')
  // context.mainWindow = createWindow(`http://${ip}:30734/login`)

  context.mainWindow.once('ready-to-show', () => {
    // 打开控制台
    // context.mainWindow.webContents.openDevTools({ mode: 'detach' })
    
    context.mainWindow.webContents.on('did-navigate-in-page', (event, url)=>{
      if(url === `http://${ip}:30734/maps`){
        injectHook(context.mainWindow)
      }
    })
  })
  handleListener()
}

function handleListener() {
  ipcMain.on('left-window', (e, url) => {
    const { bounds } = getLeftDisplay()
    const { x, y } = bounds
    if(!context.leftWindow){
      context.leftWindow = createWindow(url, {x, y})
      context.leftWindow.show()
    }else{
      context.leftWindow.loadURL(url)
    }
    context.leftWindow.setFullScreen(true)
  })

  ipcMain.on('right-window', (e, url) => {

    const { bounds } = getRightDisplay()
    const { x, y } = bounds
    if(!context.rightWindow){
      context.rightWindow = createWindow(url, {x, y})
      context.rightWindow.show()
    }else{
      context.rightWindow.loadURL(url)
    }
    context.rightWindow.setFullScreen(true)
  })
}

app.on('ready', initial)

readme

# electron-tool

#### 介绍
electron框架 实现点击按钮分屏功能

#### 软件使用说明
--- 用于点击按钮分屏显示内容 ---

 - main.js文件里：
 - 1、index !== 1 弹到左屏；否则弹到右屏
 ```
    const pos = index !== 1 ? 'left-window' : 'right-window' 
 ```
 - 2、启动创建初始页面入口
```
    context.mainWindow = createWindow(`http://${ip}:30734/login`)
```

 - 3、需要在原项目按钮上绑定data，例如：
```
    <Button data-u="http://www.baidu.com">百度</Button>
    <Button data-u="https://react.docschina.org/">React</Button>
    <Button data-u="https://ant.design/index-cn">Antd Design</Button>
```

#### 安装教程
```
    npm i
```

#### 启动
```
    npm run start
```

#### 打包
- windows系统
```
    npm run build:win
```
- Mac系统
```
    npm run build:mac
```
- linux系统
```
    npm run build:linux
```

发散思路：

参考Presentation Receiver API Sample

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试</title>
</head>

<body>
    <button id="start">测试PresentationRequest</button>
</body>
<script>
 const presentationRequest = new PresentationRequest(['http://v3.umijs.org/zh-CN/docs/plugin']);

// Make this presentation the default one when using the "Cast" browser menu.
navigator.presentation.defaultRequest = presentationRequest;

let presentationConnection;

document.querySelector('#start').addEventListener('click', function() {
  console.log('Starting presentation request...');
  presentationRequest.start()
  .then(connection => {
    console.log('> Connected to ' + connection.url + ', id: ' + connection.id);
  })
  .catch(error => {
    console.log('> ' + error.name + ': ' + error.message);
  });
});

</script>
</html>

在web网页中唤起新标签页，分屏也可以弹，但是可能要加浏览器flag设置。

也尝试过，moveTo，但是这个兼容性好像不行了，被我pass掉了。

关于web中触发electron的新建弹出左右拓展屏幕窗口示例

猜你喜欢