javascript - 调整隐藏框架的大小

Question

我正在尝试将网页加载到隐藏框架(sdk/frame/hidden-frame)中，然后渲染它的屏幕截图。我可以很好地获取屏幕截图，但框架大小不正确。使用以下代码渲染屏幕截图

var hiddenFrames = require("sdk/frame/hidden-frame");
let hiddenFrame = hiddenFrames.add(hiddenFrames.HiddenFrame({
    onReady: function() {
        this.element.contentWindow.location = "http://example.com";
        let self = this;
        this.element.addEventListener("DOMContentLoaded", function() {
            var cnvs = self.element.contentDocument.createElement("canvas");
            var width = self.element.contentDocument.body.clientHeight; //for some reason clientWidth is 0 for www.example.com
            var height = self.element.contentDocument.body.clientHeight;
            cnvs.width = width;
            cnvs.height = height;
            var ctx = cnvs.getContext("2d");
            console.log(width+" "+height);
            ctx.drawWindow(self.element.contentWindow, 0, 0, width, height, "rgb(255,255,255)");
            console.log(cnvs.toDataURL());
        }, true, true);
    }
}));

我尝试过更改 iframe 的宽度和高度

this.element.width = "1600";
this.element.height = "900";

使用resizeTo()更改element.contentWindow的大小，并更改正文的大小。它们似乎都没有对最终的屏幕截图产生影响，看起来像

Answer 1

尝试在包含 iframe(或包含 iframe 的脚本)后将其添加到父页面上。

$('iframe').load(function(){
    $(this).css({
       width: 1600,
       height:  900
    });
});