Question

我正在制作一个简单的练习Chrome应用，它会显示弹出窗口的宽度和高度。

视觉：

显然这些尺寸是错误的。

我试了很多东西，所有这些都给出了弹出窗口的错误尺寸：

window.innerWidth，window.innerHeight
window.outerWidth，window.outerHeight
document.body.clientWidth，document.body.clientHeight
document.body.offsetWidth，document.body.offsetHeight

以下是插件文件：

的manifest.json ：

{
    "manifest_version": 2,
    "name": "minimalChromePopupAddon",
    "version": "0",

    "browser_action": {
        "default_popup": "popup.html"
    }
}

popup.html

<html>
  <head>
    <script src="popup.js"></script>
  </head>
  <body>  
    <pre id="infoSection">hi</pre>
  </body>
</html>

popup.js（如果您需要此代码的传统版本，请参阅下面的代码段）

(() => {
    'use strict';

    /* gets {"width": 0, "height": 0} */
    const getWindowSize1 = () => {
        return {
            width: window.innerWidth,
            height: window.innerHeight
        };
    };

    /* gets {"width": 1366, "height": 740} */
    const getWindowSize2 = () => {
        return {
            width: window.outerWidth,
            height: window.outerHeight
        };
    };

    /* gets {"width": 30, "height": 35} */
    const getWindowSize3 = () => {
        return {
            width: document.body.clientWidth,
            height: document.body.clientHeight
        };    
    }

    /* gets {"width": 14, "height": 15} */
    const getWindowSize4 = () => {
        return {
            width: document.body.offsetWidth,
            height: document.body.offsetHeight
        };         
    };

    window.onload = () => {     
        const infoSection = document.getElementById('infoSection');   
        const info = getWindowSize4();                  

        infoSection.innerHTML = JSON.stringify(info, null, 4);
    };
})();

popup.js（简化为更传统的javascript）

/* gets {"width": 0, "height": 0} */
function getWindowSize1() {
    var ret = {
        width: window.innerWidth,
        height: window.innerHeight
    };

    return ret;
}

/* gets {"width": 1366, "height": 740} */
function getWindowSize2() {
    var ret = {
        width: window.outerWidth,
        height: window.outerHeight
    };

    return ret;
}

/* gets {"width": 30, "height": 35} */
function getWindowSize3() {
    var ret = {
        width: document.body.clientWidth,
        height: document.body.clientHeight
    };    

    return ret;
}

/* gets {"width": 14, "height": 15} */
function getWindowSize4() {
    var ret = {
        width: document.body.offsetWidth,
        height: document.body.offsetHeight
    };    

    return ret;
}

function loadListener(event) {
    window.removeEventListener('load', loadListener);
    var infoSection = document.getElementById('infoSection');   
    var info = getWindowSize4();                  

    infoSection.innerHTML = JSON.stringify(info, null, 4);
}

window.addEventListener('load', loadListener);

有人可以告诉我如何以像素为单位获取弹出窗口的尺寸，或解释为什么不能这样做？

提前致谢。

可能的答案：

在窗口内显示窗口大小会更改窗口大小以适合正在显示的文本，而文本又不再对应于正在显示的文本...问题是

解决方案：

popup.html

<html>
  <head>
    <script src="popup.js"></script>
    <style>
/* make sure that adding text to info section does not alter viewport size. */
#infoSection {
    width: 150px;
    height: 80px;
    overflow: scroll;
}    
    </style>
  </head>
  <body>  
    <pre id="infoSection">hi</pre>
  </body>
</html>

popup.js

(() => {
    'use strict';

    window.onload = () => {
        const infoSection = document.getElementById('infoSection');   
        const info = {
            width: document.body.clientWidth,
            height: document.body.clientHeight
        };    

        infoSection.innerHTML = JSON.stringify(info, null, 4); 
    };    
})();

Answer 1

<强>解决方案：

向#infoSection添加文字会更改视口的大小，因为#infoSection会扩展以容纳放入其中的信息。解决此问题的一种方法是使用滚动条使#infoSection固定大小，这样向其添加文本不会调整大小并更改视口。

<强>视觉：

<强> popup.html

<html>
  <head>
    <script src="popup.js"></script>
    <style>
/* make sure that adding text to info section does not alter viewport size. */
#infoSection {
    width: 150px;
    height: 80px;
    overflow: scroll;
}    
    </style>
  </head>
  <body>  
    <pre id="infoSection">hi</pre>
  </body>
</html>

<强> popup.js

(() => {
    'use strict';

    window.onload = () => {
        const infoSection = document.getElementById('infoSection');   
        const info = {
            width: document.body.clientWidth,
            height: document.body.clientHeight
        };    

        infoSection.innerHTML = JSON.stringify(info, null, 4); 
    };    
})();

如何找到镀铬扩展弹出窗口的宽度和高度？

1 个答案: