onbeforeprint() 和 onafterprint() 等价于非 IE 浏览器

IT技术 php javascript mysql html onbeforeprint
2021-03-05 19:19:08

当用户打印某个网页时,我想将一些信息发送回我的数据库。我可以在 IE 中使用onbeforeprint()onafterprint()但我想以浏览器不可知的方式做同样的事情。只要完成,我就不必在意我必须使用哪种技术组合(PHP、MySQL、JavaScript、HTML)。有任何想法吗?

编辑:

仍然有一些问题。我尝试将我的函数Print.css作为图像放入我的函数中,但我在某些方面弄乱了它。然后我尝试只添加一个事件侦听器,但我也无法让它正常工作。如果有人能提供更多关于我如何在任何浏览器中打印之前调用函数的详细信息,我将不胜感激。

编辑:

我现在放弃这个,我已经解决了另一种做我想做的事情。我期待 FireFox 支持 onbeforeprint() 和 onafterprint() 的那一天。

4个回答

现在很多浏览器都支持window.matchMedia. 此 API 允许您检测 CSS 媒体查询何时生效(例如,旋转屏幕或打印文档)。对于一个跨浏览器的方式,结合window.matchMediawindow.onbeforeprint/ window.onafterprint

以下可能会导致多次调用beforePrint()and afterPrint()(例如,每次重新生成打印预览时Chrome 都会触发侦听器)。这可能是也可能不是可取的,这取决于您为响应打印而进行的特定处理。

if ('matchMedia' in window) {
    // Chrome, Firefox, and IE 10 support mediaMatch listeners
    window.matchMedia('print').addListener(function(media) {
        if (media.matches) {
            beforePrint();
        } else {
            // Fires immediately, so wait for the first mouse movement
            $(document).one('mouseover', afterPrint);
        }
    });
} else {
    // IE and Firefox fire before/after events
    $(window).on('beforeprint', beforePrint);
    $(window).on('afterprint', afterPrint);
}

更多:http : //tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/

值得注意的是,Chrome 似乎两次触发打印事件。
2021-04-22 19:19:08
...实际上是四次——一次是 media.matches=true,然后是 media.matches=false,然后是 media.matches=true,然后是 media.matches=false。
2021-05-06 19:19:08
不要在打印前更新 HTML/类。仅适用于打印后(使用 Chromium 38)。看到这个小提琴:jsfiddle.net/8a71xxc2可以使用 FF(但仅限于 onbeforeprint 功能),而不适用于 Chrome
2021-05-09 19:19:08
当我在 Chrome 中使用“使用系统对话框打印”时,这不起作用。窗口关闭但打印失败。刚报道。:)
2021-05-10 19:19:08

不确定其他浏览器会允许您这样做您当然可以在打印样式表的某处指定一个图像,它可能只会在打印时调用,因为onbeforeprint

Firefox 从版本 6 开始支持 onbeforeprint,请参阅developer.mozilla.org/en/DOM/window.onbeforeprint
2021-04-29 19:19:08
不知道这样行不行。我建议调用服务器端脚本作为确实返回图像的图像源,并且只执行您喜欢的操作(记录打印操作,可能设置页面上其他 js 可以检索/轮询等的会话变量)
2021-05-05 19:19:08
你是在建议这样的事情吗? siteexperts.com/forums/viewConverse.asp?d_id=19568
2021-05-06 19:19:08

尝试window.print()用你自己的掩饰本机...

// hide our vars from the global scope
(function(){

  // make a copy of the native window.print
  var _print = this.print;

  // create a new window.print
  this.print = function () {
    // if `onbeforeprint` exists, call it.
    if (this.onbeforeprint) onbeforeprint(this); 
    // call the original `window.print`.
    _print(); 
    // if `onafterprint` exists, call it.
    if (this.onafterprint) onafterprint(this);
  }

}())

更新:评论。

@typoknig:我在答案中添加了代码注释,应该有助于解释发生了什么。
2021-04-17 19:19:08
在我的页面上,我没有为用户提供打印按钮,所以我真正需要注意的是用户何时进入File > Print非 IE 浏览器。我会稍微处理一下,看看我是否可以让您的代码正常工作,如果不能,那么我可能会“矫枉过正”:)
2021-04-28 19:19:08
谢谢@no,但我很难遵循您的代码。你说这会屏蔽任何浏览器的原生打印功能?这也给我提出了另一个问题,我可以创建一个 JavaScript 函数来检查每个窗口事件,然后在打印之前执行我想在window.print == true什么时候执行的函数吗?
2021-05-02 19:19:08
那这对你没有帮助。再看看 Wrikken 的回答;您可以将所需的数据放入查询字符串中,然后添加一个打印 css 规则,该规则通过服务器端脚本加载图像,该脚本在响应图像之前存储查询字符串中的数据。
2021-05-10 19:19:08
@typoknig:会的;因此,您可能希望为onbeforeprint选择不同的名称onafterprint我假设您想window.print从您自己的脚本之外的其他脚本中捕获调用关于你问题的第二部分,我认为它会起作用,但听起来有点矫枉过正......
2021-05-14 19:19:08

我认为这是不可能的。或者至少 - 不是使用我所知道的任何技术,也不是使用之前给出的任何答案。

使用 onafterprint 和使用服务器端动态图像生成脚本都会告诉您,即使访问者只是进入打印预览模式然后取消,页面也已打印。

但是,我想了解如何获取正确的信息,以确保该页面确实已打印。