如何从 Javascript 重置网页上的缩放（捏缩放后）？

Question

我正在开发一个基于旧科尔多瓦的应用程序。在我的页面上，我有一个 iframe，可以在其中显示 PDF（使用 PDFJS 库）。用户可以使用 PDF 查看器上的缩放按钮或捏缩放来缩放 PDF 区域。要求是当用户单击主页（非 iframe 区域）上的按钮时，我必须将 PDF 的缩放级别重置为正常。

如果使用下面的代码（特定于 PDFJS）通过缩放按钮完成缩放，我就可以做到这一点

document.getElementById("myPdf").contentWindow.PDFViewerApplication.pdfViewer.currentScaleValue = 'auto';

但是，如果使用捏缩放完成缩放，我无法重置（完成捏缩放后，iframe 中加载的完整 HTML 会被缩放，因此它是网页缩放）。我尝试了下面的代码，重置初始比例，但它不起作用

document.querySelector("meta[name=viewport]").setAttribute(
          'content', 
          'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');

谁能建议一种方法来做到这一点？

Answer 1

您可以尝试操作.style.zoom所需目标元素上的属性：

const zoomingTarget = document.querySelector('.zooming-target')

抓取想要重置缩放的所需元素后，您可以更改.style.zoom其属性：

zoomingTarget.style.zoom = "calc(100% + " + zoomIndex*10 + "%)";

使用两个按钮实现 ->更改浏览器缩放级别