网页全屏以及禁用F11默认行为-vue项目

Posted 2023-04-16

参考技术A 我在写网页全屏时候发现，通过按键F11打开的全屏貌似使用脚本无法正确关闭。具体表现是，按键F11会打开全屏，这个时候打印window对象中的 window.document ，会发现 window.document 下面的有关全屏的属性并未改变， window.document.fullscreen 的值为 false ，此时反复点击切换全屏按钮全屏不会切换。通过 screenfull.toggle() 方法切换全屏，断点发现确实执行到方法里面了，但是并没有关闭全屏（我猜测F11打开的全屏可能权限更高只能由F11关闭，toggle方法虽然执行了切换全屏并且打印 window.document.fullscreen 的值发现也切换 true 和 false ，但是由于权限不足并没有真正关闭F11打开的全屏）。

之后，换一个思路，既然无法操作F11打开的全屏，那就阻止F11的默认行为。在适当时机（我选择在入口组件中）监听按键，如果用户按了F11键（ keyCode == 122 ），则阻止默认行为，去进行我们自定义的操作，比如使用 screenfull.toggle() 方法切换全屏，这样看上去就像是在正常使用F11。然后是处理按钮点击切换全屏。有了以上的步骤，下面就很简单了。在页面添加按钮，点击按钮切换全屏，具体参照如下步骤：

注：网页全屏有很多兼容性写法， screenfull 为我们处理了兼容并且监听了全屏状态，这样我们就不需要再判断是否全屏，直接使用 toggle 方法就可以切换全屏了。

npm install screenfull --save

选择在入口组件 App.vue 中监听按键

进入网页按F11键，发现全屏了，这时无论时继续F11按键或者是Esc键或者点击切换全屏按钮都能关闭全屏；进入其他路由按F11键也能却换全屏，看上去并没有禁用F11的功能（实际上是禁用了F11默认行为的）。至此已经完成了整个项目的全屏切换。

完_______

QWebEngineView 如何禁用捏合缩放

【中文标题】QWebEngineView 如何禁用捏合缩放

【英文标题】：QWebEngineView how to disable pinch-to-zoom

【发布时间】：2019-09-26 10:28:41

【问题描述】：

我在显示 HTML 网页的触摸 Linux 设备上运行带有 QWebView 的 Qt 5.9.4 应用程序。

当用户在屏幕上捏手指时，他们会放大网页。我想禁用该行为，因为所有网页都应该 100% 全屏显示。

我可以通过将user-scalable=no 添加到视口来暂时在网页中禁用它（因为我拥有他们的代码），但从长远来看这不会起作用，因为不是每个网页都会有它。

我尝试在我的应用程序的不同元素上使用 eventFilter，但无法捕获任何手势甚至鼠标事件。

这就是我创建 web 视图的方式（在 QDialog 中）：

void Dialog::createWebView() 
  view = new QWebEngineView(this);
  profile = new QWebEngineProfile();
  page = new QWeEnginePage(profile);
  view->setPage(page);
  view->setUrl(QUrl(path));

这是我的 eventFilter 类：

EvFilter::EvFilter(QObject *parent) : QObject(parent)




bool EvFilter::eventFilter(QObject *obj, QEvent *event)


    qDebug() << event->type() << "\n";
    return QObject::eventFilter(obj, event);

我试过了

EvFilter* evf = new EvFilter();
view->installEventFilter(evf);

而且在所有其他元素（配置文件、页面、对话框）上，但似乎无法获得与鼠标或手势对应的任何事件。 我究竟做错了什么？我怎样才能在整个 webview 中防止这种行为？

将事件侦听器添加到 QApplication 对象后，我可以检测到 TouchBegin、TouchUpdate、TouchCancel 和 TouchEnd 事件，但没有其他（没有 Gesture 事件）。我不知道如何检测 touchevent 是否是缩放手势。

【问题讨论】：

尝试在view->setUrl(QUrl(path));之后添加EvFilter* evf = new EvFilter(); view->focusProxy()->installEventFilter(evf);

@eyllanesc 不幸的是，它的工作方式与在整个 QApplication 上安装它的方式相同，我可以看到触摸事件，但我不知道如何知道它们何时用于缩放以及何时只是正常触摸事件。我想在所有设备上完全禁用缩放。是否可以？我找不到任何禁用缩放的设置。

【参考方案1】：

我认为你可以在对话框上使用它（没有测试它）。我有一些其他小部件显示 QML QtWebView，而我为防止小部件的孩子获得捏手势所做的事情是：

this->grabGesture(Qt::PinchGesture, Qt::DontStartGestureOnChildren);

这会阻止底层小部件接收 PinchGesture，以便您自己处理。