electron桌面应用打开webview的方法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/jbguo/article/details/89963518

const windowOptions = {
  title: 'demo',
  // titleBarStyle: 'hidden',
  width: 1440,
  height: 900,
  webPreferences: {
    devTools: true, //可禁用devTools:false,
    nodeIntegration: true,
    contextIsolation: true, //上下文隔离
    preload: path.join(__dirname, './utils/preload.js'), // webview中预加载的js
  },
  // frame: false, //无边框窗口
};

// 创建浏览器窗口
mainWindow = new BrowserWindow(windowOptions);
// 加载本地index.html
// mainWindow.loadFile('index.html');

// 1. 加载本地index.htmlindex.html含有<webview id="ads" src="https://csdn.net/" style="display:inline-flex; width:100%; min-height:900px" allowpopups />;
mainWindow.loadURL(
  url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file',
    slashes: true,
  })
);

// 2. 加载BrowserView页面
let view = new BrowserView({
  webPreferences: {
    devTools: true,
    nodeIntegration: false,
    // preload: path.join(__dirname, './utils/preload.js'),
  },
});

mainWindow.setBrowserView(view);
view.setBounds({ x: 0, y: 0, width: 1440, height: 900 });
view.setAutoResize({ width: true, height: true }); //这段代码可以设置browserView视图宽度随窗口变化
view.webContents.loadURL('https://csdn.net/');

// 3. 直接调用loadURL
mainWindow.loadURL('https://csdn.net/');
mainWindow.maximize();