electron桌面应用打开webview的方法

最新推荐文章于 2025-02-21 15:05:51 发布

_必应

最新推荐文章于 2025-02-21 15:05:51 发布

阅读量7.8k

点赞数

分类专栏： electron

本文链接：https://blog.youkuaiyun.com/jbguo/article/details/89963518

版权

electron 专栏收录该内容

9 篇文章

订阅专栏

博客主要围绕Electron桌面应用展开，介绍了在Electron桌面中打开Webview的相关内容，涉及信息技术领域中桌面应用与网页视图结合的操作方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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://youkuaiyun.com/" 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://youkuaiyun.com/');

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