Javascript - 当样式更改反映时检测？

我有一个浏览器扩展，它使用可见页面的屏幕截图（使用浏览器的API）。Javascript - 当样式更改反映时检测？

用户通过自定义上下文菜单启动进程，并将其注入到网页中。

wrapper.addEventListener("contextmenu", function(e) { 
    //prevent default context menu 
    e.preventDefault(); 
    menu.style.display = "block"; 
}); 

menu.addEventListener("click", function click(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    //prevent the appearance of the menu in the screenshot 
    menu.style.display = "none"; 
    capture(); 
}, false);

问题是菜单在屏幕截图中仍然可见。有没有一种方法可以检测样式变化何时被反映出来？

谢谢。

来源

2013-05-13 Red John

为什么不使用打印样式表，只显示'display：none'相关的元素？ – 2013-05-13 22:53:07

我隐藏的元素是上下文菜单本身，我通过代码将其更改为可见/隐藏，因为如果用户已经隐藏，用户还可以单击它。（即我只隐藏它，只有当用户点击它） – 2013-05-13 22:58:15

可能重复[如何强制WebKit重绘/重绘传播样式更改？]（http://stackoverflow.com/questions/3485365/how-can -i-force-webkit-to-redraw-repaint-propagate-style-changes）或[在Chrome/Mac上强制DOM重绘/刷新]（http://stackoverflow.com/q/8840580/1048572）？ – Bergi 2013-05-13 23:02:13

我解决它通过安装额外的监听父元素（不知道为什么它的工作原理虽然）

wrapper.addEventListener("contextmenu", function(e) { 
    //prevent default context menu 
    e.preventDefault(); 
    menu.style.display = "block"; 
}); 

wrapper.addEventListener("mousedown", function(e) { 
    //can't use "display: none" before mouseup 
    menu.style.opacity = 0; 
}, false); 

menu.addEventListener("click", function click(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    //prevent the appearance of the menu in the screenshot 
    menu.style.display = "none"; 
    capture(); 
}, false);

来源

2013-05-14 01:19:25

最有可能把呼叫capture一个setTimeout内用合适的延迟会做的伎俩为你。

来源

2013-05-14 06:51:11

Javascript - 当样式更改反映时检测？

回答

相关问题