如何防止我的Chrome扩展程序中的弹出式窗口缩放 [英] How to prevent zooming in popup window in my Chrome Extension

问题描述

我刚刚注意到，如果我在标签页中放大网页（通过Ctrl-Plus），然后打开Chrome扩展程序的弹出窗口，它也会扩展。不幸的是，它显示一个垂直的，在更大的规模，甚至水平滚动条。

I just noticed that if I zoom up the web page in a tab (by doing Ctrl-Plus) and then open the popup window for my Chrome Extension it also gets scaled up. Unfortunately that makes it display a vertical and, at larger scale, even a horizontal scrollbar.

我看到其他扩展有点阻止这种缩放通过显示他们的弹出100％只要。

I see that other extensions somehow block this zooming by displaying their popups at 100% zoom only. The question is how to do it?

推荐答案

快速记下有兴趣的人如何解决问题。

Quick note for whoever is interested how I solved it.

首先，我刚刚学到的关于Chrome的一些细节。要缩放插件的弹出窗口，需要从Chrome的设置中打开其选项窗口，然后放大或缩小。然后，即使在选项页面关闭时，相应的插件也会对缩放进行零售。要恢复它，只需在选项页面上恢复缩放即可。酷，哈！太糟糕了，虽然许多插件不是设计来正确处理它。正如我在原始问题中提到的，大多数显示奇怪的滚动条或简单地扭曲的内容。

First, a little detail about Chrome that I just learned. To zoom a plug-in's popup window one needs to open its Options window from the Chrome's Settings and zoom it in or out. Then, even when the Options page is closed, that corresponding plug-in will retail the zoom. To restore it, simply restore zoom on the Options page. Cool, hah! Too bad though that many plug-ins are not designed to handle it correctly. As I mentioned in my original question most display weird looking scrollbars or simply distort the content.

这是我在我的插件中克服它：

Here's how I overcame it in my plug-in:

首先，您需要确定弹出窗口的当前缩放。 （以下仅在Chrome上测试，取自此帖）：

First you need to determine the current zoom of the popup window. (The following is tested only on Chrome, taken from this post):

function getPageZoom()
{
    //RETURN: 1.0 for 100%, and so on
    var zoom = 1;

    try
    {
        var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
        svg.setAttribute('version', '1.1');
        document.body.appendChild(svg);
        zoom = svg.currentScale;
        document.body.removeChild(svg);
    }
    catch(e)
    {
        console.error("Zoom method failed: " + e.message);
    }

    return zoom;
}

然后创建一个可滚动的 DIV 将您的弹出式窗口内容放置在您可以滚动的位置：

Then create a scrollable DIV to place your popup window content in that you'd be OK with if it scrolled:

#mainSection{
    margin: 0;
    padding: 0;
    overflow-y: auto;       /* The height will be defined in JS */
}

<div id="mainSection">
</div>

然后设置可滚动 DIV 使用页面缩放进行小缩放计算的高度。一旦DOM加载，例如 onLoad（）事件或jQuery的 $（function（）{}）; code>：

Then set the scrollable DIV's maximum height with a small scaling calculation using the page zoom. Do so as soon as the DOM loads, say, from onLoad() event, or within jQuery's $(function(){});:

//Get page zoom
var zoom = getPageZoom();

//Using jQuery
var objMain = $("#mainSection");

//Calculate height & offsets of elements inside `mainSection` 
//using jQuery's offset() and outerHeight()
//Make sure to multiply results returned by zoom

var offsetElement1 = $("someElement1").offset().top * zoom;
var heightElement2 = $("someElement2").outerHeight() * zoom;

//Apply the calculations of the height (in real situation you'll obviously do more...)
var height = offsetElement1 + heightElement2;

//And finally apply the calculated height by scaling it back down
var scaledHeight = height / zoom;

//Need to convert the result to an integer
scaledHeight = ~~scaledHeight;

//And set it
objMain.css("max-height", scaledHeight  + 'px');

当用户选择较大的缩放时，

All this should show a nice vertical scrollbar only where you want it when a user chooses a larger zoom.

最后，您需要确保，如果用户在您的弹出窗口开始缩放扩展程序的显示，您需要关闭它。我选择了这个方法：

And lastly you need to make sure that if a user starts zooming the extension's Options page while your popup window is displayed, you need to close it. I chose this method:

    $(window).resize(function()
    {
        var zoom = getPageZoom();

        //Multiply zoom by 100 (to round it to 2 decimal points) and convert to int
        var iZoom = zoom * 100;
        iZoom = ~~iZoom;

        if(window.izoom &&
            iZoom != window.izoom)
        {
            //Close popup
            window.close();
        }

        window.izoom = iZoom;
    });

这篇关于如何防止我的Chrome扩展程序中的弹出式窗口缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！