javascript - 如何防止在我的 Chrome 扩展程序中放大弹出窗口

Question

我刚刚注意到，如果我在选项卡中放大网页(通过执行 Ctrl-Plus)，然后打开我的 Chrome 扩展程序的弹出窗口，它也会放大。不幸的是，这使得它显示一个垂直滚动条，在更大的范围内，甚至显示一个水平滚动条。

我看到其他扩展以某种方式通过仅以 100% 缩放显示弹出窗口来阻止这种缩放。问题是如何去做？

Answer 1

任何对我如何解决它感兴趣的人的快速说明。

首先，介绍一下我刚刚了解到的有关 Chrome 的一些细节。要缩放插件的弹出窗口，需要从 Chrome 的设置打开其选项窗口，然后将其放大或缩小。然后，即使关闭了选项 页面，相应的插件也会提供缩放功能。要恢复它，只需在选项 页面上恢复缩放。酷，哈!太糟糕了，尽管许多插件的设计并不能正确处理它。正如我在最初的问题中提到的那样，大多数显示的滚动条看起来很奇怪，或者只是扭曲了内容。

以下是我如何在我的插件中克服它:

首先，您需要确定弹出窗口 的当前缩放比例。 (以下仅在 Chrome 上测试，取自 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 来放置您的弹出窗口内容，如果它滚动的话您可以接受:

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

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

然后使用页面缩放通过小的缩放计算设置可滚动 DIV 的最大高度。一旦 DOM 加载，例如从 onLoad() 事件，或在 jQuery 的 $(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');

当用户选择更大的缩放时，所有这些都应该只在您想要的地方显示一个漂亮的垂直滚动条。

最后，您需要确保如果用户在显示您的弹出窗口 时开始缩放扩展程序的选项 页面，您需要将其关闭。我选择了这种方法:

    $(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;
    });