Html2canvas在IE11中呈现错误布局的页面未打开devtools

Question

Html2canvas在IE11中呈现错误布局的页面未打开devtools

Ale*_*.P. 2 twitter-bootstrap html2canvas

我正在尝试通过html2canvasIE11 修复与将网页渲染到画布相关的错误.问题有点令人困惑:站点使用bootstrap 2.3网格实现负责任的布局.

当开发人员工具未打开时,它会像表/智能手机屏幕一样呈现.
但是,如果我按下F12(开发者工具打开,没有执行任何其他操作)并单击以呈现它按预期呈现的页面,用于宽屏幕.

删除了旧应用程序的过时链接.它不存在于指定的地址上.

这个问题在IE11中重现了onli并且一旦devtool被打开就消失了,所以我的事件不知道如何调试它.

Answer 1

Ale*_*.P. 6

我实际上不知道IE11到底是怎么回事,但我找到了一种快速的猴子修补方式来解决它:

return new Promise(function(resolve) {
        var documentClone = container.contentWindow.document;

        /* Chrome doesn't detect relative background-images assigned in inline <style> sheets when fetched through getComputedStyle
         if window url is about:blank, we can assign the url to current by writing onto the document
         */
        container.contentWindow.onload = container.onload = function() {
            var interval = setInterval(function() {
                if (documentClone.body.childNodes.length > 0) {
                    initNode(documentClone.documentElement);
                    clearInterval(interval);
                    if (options.type === "view") {
                        container.contentWindow.scrollTo(x, y);
                        if ((/(iPad|iPhone|iPod)/g).test(navigator.userAgent) && (container.contentWindow.scrollY !== y || container.contentWindow.scrollX !== x)) {
                            documentClone.documentElement.style.top = (-y) + "px";
                            documentClone.documentElement.style.left = (-x) + "px";
                            documentClone.documentElement.style.position = 'absolute';
                        }
                    }
                    resolve(container);
                }
            }, 50);
        };

        documentClone.open();
        documentClone.write("<!DOCTYPE html><html></html>");
        // Chrome scrolls the parent document for some reason after the write to the cloned window???
        restoreOwnerScroll(ownerDocument, x, y);
        documentClone.replaceChild(documentClone.adoptNode(documentElement), documentClone.documentElement);

        /*
           #HERE
           1) It seems IE 11 does not get right computed styles when clones a node (See function cloneNode) above.
           2) In documentClone.replaceChild(...) IE 11 does not apply @media instructions.
              That's can be checked
                  by alert('ndocumentClone ' + $('.row-fluid [class*="span"]', documentClone).css('float'));
                  or alert('documentElement ' + $('.row-fluid [class*="span"]', documentElement).css('float'));
              These both statments shows 'left' for wide screen in Chrome and shows none in IE11 (without dev panel).
            To fix that we need to re-apply styles somehow. Change the container width works but probably a better
            way exists. Lets have this in mind.
         */
        container.width = width + 1;
        /* * */

        documentClone.close();
    });

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，9 月前
查看次数：	2079 次
最近记录：	7 年，11 月前