gpt4 book ai didi

twitter-bootstrap - Html2canvas 在 IE11 中渲染页面布局错误,且未打开开发工具

转载 作者:行者123 更新时间:2023-12-01 17:47:39 24 4
gpt4 key购买 nike

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

  1. 当开发者工具未打开时,它会呈现为针对桌面/智能手机屏幕

  2. 但是,如果我按 F12(开发人员工具打开,不执行任何其他操作)并单击以呈现页面它按预期呈现,适用于宽屏幕

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

此问题仅在 IE11 中重现,打开 devtool 后消失,所以我不知道如何调试它。

最佳答案

我其实不知道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();
});

关于twitter-bootstrap - Html2canvas 在 IE11 中渲染页面布局错误,且未打开开发工具,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31793507/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com