调整隐藏框架的大小

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的大小，改变body的大小。他们似乎都没有影响最终的截图，看起来像

Answer 1

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

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