electron 子视图BrowserView

骑猪看日落 2021-07-24 13:24 1076阅读 0赞

类似webview标签,可以用来替代webview标签
    
    1、引入electron中的BrowserView
    	const {app, BrowserWindow,BrowserView} = require('electron')
    	
    2、创建BrowserView实例
    	  let view=new BrowserView();
    	  
    3、设置视图大小和位置
    	  view.setBounds({x:10,y:20,width:300,height:300});
    	  
    4、设置视图加载的网页内容
    	  view.webContents.loadURL('https://www.baidu.com');
    	  
    5、在父窗口内加载视图
    	  mainWindow.setBrowserView(view);
    
    其他方法
    view.destroy();  销毁视图
    view.isDestroyed();  返回布尔值,视图是否销毁
    view.setBackgroundColor("#F5F5F5");   背景色,16进制rgba格式

[文档][Link 1]

代码示例:

// Modules to control application life and create native browser window
    const { app, BrowserWindow,BrowserView} = require('electron')
    const path = require('path')
    
    function createWindow () { 
      // Create the browser window.
      const mainWindow = new BrowserWindow({ 
        width: 800,
        height: 600,
        //弹出的窗口有无边框,默认为有
        // frame:false,
        show:false,
        backgroundColor:'#586148',
        webPreferences: { 
          preload: path.join(__dirname, 'preload.js'),
          nodeIntegration:true,
          webviewTag:true
        },
      })
    
      // and load the index.html of the app.
      mainWindow.loadFile('index.html')
      mainWindow.webContents.on("did-finish-load",()=>{ 
          
      })
      mainWindow.webContents.on('dom-ready',()=>{ 
       
      })
      mainWindow.once('ready-to-show',function(){ 
        mainWindow.show();
      })
      
      let view=new BrowserView();
      view.setBounds({ x:10,y:20,width:300,height:300});
      view.webContents.loadURL('https://www.baidu.com');
      mainWindow.setBrowserView(view);
    
      setTimeout(()=>{ 
        view.destroy()
      },5000)
    
    
      // Open the DevTools.
      // mainWindow.webContents.openDevTools()
    }
    
    // This method will be called when Electron has finished
    // initialization and is ready to create browser windows.
    // Some APIs can only be used after this event occurs.
    // app.whenReady().then(createWindow)
    app.on('ready',()=>{ 
    
      createWindow();
    
    });
    
    // Quit when all windows are closed.
    app.on('window-all-closed', function () { 
      // On macOS it is common for applications and their menu bar
      // to stay active until the user quits explicitly with Cmd + Q
    
      if (process.platform !== 'darwin') app.quit()
    })
    
    app.on('activate', function () { 
      // On macOS it's common to re-create a window in the app when the
      // dock icon is clicked and there are no other windows open.
      if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
    
    // In this file you can include the rest of your app's specific main process
    // code. You can also put them in separate files and require them here.

[Link 1]: https://www.electronjs.org/docs/api/browser-view