我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

electron如何禁用页面缩放事件?在以往的经验文章中,苏南大叔已经写过了一篇博文,具体链接见文末。虽然上篇文章的代码,苏南大叔自测通过。但是还是有人表示有不同的观点。所以,在本篇文章里面,关于页面缩放事件,苏南大叔也再次提出一个新的解决方案,那就是:设置zoomlimit

苏南大叔:electron 如何禁用页面缩放事件?设置zoomlimit方案 - electron-pinch-zoomlimit
electron 如何禁用页面缩放事件?设置zoomlimit方案(图4-1)

在本文中,苏南大叔从两个方面来设置zoomlimit,分别是:主进程和渲染进程。测试环境是mac+electron@3.0.1

前言

鉴于electron的版本很多,禁用electron的页面缩放事件的方案很多,而且页面缩放的触发方式有很多,比如:

  • mac的双指缩放
  • mac: command+加号/command+减号/command+0
  • win: ctrl+加号/ctrl+减号/ctrl+0

那么,苏南大叔建议大家可以多多组合测试。本文提出的方案也可能不会是最好的方案。到底哪个方案适合你,请自行体会。

方案零:一个可能不存在的方案

江湖流传,存在一个参数叫做--disable-pinch

app.commandLine.appendSwitch('disable-pinch');

但是,在苏南大叔的往期缩放禁用测试中,呼声极高的--disable-pinch参数似乎是不生效的。

方案一:渲染进程监测js事件

当然,在上述链接中,苏南大叔也提出了另外的一个解决方案。那就是在渲染进程中,通过监控缩放事件的一个可行方案。

document.addEventListener('mousewheel', (ev) => {
  if(ev.ctrlKey){
    ev.preventDefault();
    return false;
  }
});
document.addEventListener('mousewheel', (ev) => {
  if(ev.ctrlKey){
    ev.preventDefault();
    return false;
  }
});

大家可以自行了解:

方案二:渲染进程设置zoomlimit

在渲染进程里面设置zoomlimit的方案,相当而言,是比较简单的。代码如下:
index.html

require('electron').webFrame.setZoomLevelLimits(1,1)

苏南大叔:electron 如何禁用页面缩放事件?设置zoomlimit方案 - renderer-01
electron 如何禁用页面缩放事件?设置zoomlimit方案(图4-2)

这个渲染进程里面的require,就有个限制因素了。就是:

nodeIntegration:true

这个道理,苏南大叔就不详细说明了,大家都明白。

苏南大叔:electron 如何禁用页面缩放事件?设置zoomlimit方案 - renderer-02
electron 如何禁用页面缩放事件?设置zoomlimit方案(图4-3)

方案三:主进程设置zoomlimit(推荐)

鉴于渲染进程设置zoomlimit的前提是nodeIntegration:true,而这个需求是不一定可以满足的。所以,这里苏南大叔提出了一个新的解决方案,就是在主进程里面设置zoomlimit。代码如下:
main.js:

let webContents=mainWindow.webContents;
webContents.on('did-finish-load`,()=>{
    webContents.setZoomFactor(1);
    webContents.setVisualZoomLevelLimits(1,1);
    webContents.setLayoutZoomLevelLimits(0,0);
});

苏南大叔:electron 如何禁用页面缩放事件?设置zoomlimit方案 - main-code
electron 如何禁用页面缩放事件?设置zoomlimit方案(图4-4)

上述代码,苏南大叔放在了mainWindows创建之后。由于上述代码,并不是写着渲染进程里面的,所以和nodeIntegration没有任何冲突,完美。

相关文章

后记

本篇文章中的解决方案,仅仅就考虑了仅一个窗口的情况。而且由于心情原因,苏南大叔也没有特别详细测试每种可能情况。所以,请大家看到本文的时候,分析地发展编写自己的逻辑代码,欢迎您留言表达更佳解决方案。

更多electron的文章,请点击下面的链接:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   electron