javascript - 仅在打印时进行 DOM 操作

Question

我想做

$('#foo').insertAfter('#bar');

但仅当用户打印页面时。我不想在屏幕上执行任何脚本。

我意识到，如果我想操作样式，这会很简单，因为那样我就可以在 CSS 中使用 @media print {} 。然而我想要实现的目标(DOM操作)无法用CSS实现，因此我需要使用JS。

如何仅在用户打印或进行打印预览时运行 JavaScript(或 jQuery)？

Answer 1

如果您不关心跨浏览器功能，您可以使用 window.onbeforeprint事件，但仅在 IE 和 Firefox 6+ 中支持

window.onbeforeprint = function(){
     $('#foo').insertAfter('#bar');
};

另一种方法是覆盖 CTRL+P 击键

window.onkeydown = function(e){
  var char = String.fromCharCode(e.keyCode);  
  if(char == "P" && e.ctrlKey){
      $('#foo').insertAfter('#bar');
  }
};

Fiddle

但是如果用户使用菜单系统进行打印或右键单击进行打印，则此方法将不起作用。