仅对打印进行DOM操作

DOM manipulation on print only

本文关键字：DOM 操作 打印      更新时间：2023-09-26

我想做

$('#foo').insertAfter('#bar');
只有当用户打印页面时，才会出现

和。我不想在屏幕上执行任何脚本。

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

我如何运行JavaScript(或jQuery) 只有当用户打印或打印预览?

如果你不关心跨浏览器的功能，你可以使用窗口。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');
  }
};

小提琴

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

相关文章：