【问题标题】:onbeforeprint() and onafterprint() equivalent for non IE browsersonbeforeprint() 和 onafterprint() 等效于非 IE 浏览器
【发布时间】:2011-03-21 08:48:52
【问题描述】:

当用户打印某个网页时,我想将一些信息发送回我的数据库。我可以在 IE 中使用 onbeforeprint()onafterprint() 执行此操作,但我想以与浏览器无关的方式来做同样的事情。不在乎我必须使用哪种技术组合(PHP、MySQL、JavaScript、HTML),只要它完成即可。有什么想法吗?

编辑:

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

编辑:

我现在放弃了,我已经决定用另一种方式做我想做的事。期待FireFox支持onbeforeprint()和onafterprint()的那一天。

【问题讨论】:

    标签: php javascript mysql html onbeforeprint


    【解决方案1】:

    Many browsers 现在支持window.matchMedia。此 API 允许您检测 CSS 媒体查询何时生效(例如,旋转屏幕或打印文档)。对于跨浏览器方法,将window.matchMediawindow.onbeforeprint/window.onafterprint 结合使用。

    以下可能导致多次调用beforePrint()afterPrint()(例如Chrome fires the listener every time the print preview is regenerated)。这可能是可取的,也可能不是可取的,具体取决于您为响应打印而进行的特定处理。

    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 似乎触发了两次打印事件。
    • ...实际上是四次 -- 一次是 media.matches=true,然后是 media.matches=false,然后是 media.matches=true,然后是 media.matches=false。
    • 当我在 Chrome 中使用“使用系统对话框打印”时,这不起作用。窗口关闭,但打印失败。只是报道。 :)
    • 在打印前不能更新 HTML/类。仅适用于打印后(使用 Chromium 38)。看到这个小提琴:jsfiddle.net/8a71xxc2。可以使用 FF(但仅使用 onbeforeprint 功能),而不是使用 Chrome
    【解决方案2】:

    我不是sure other browsers will allow you to。您当然可以在打印样式表中的某处指定图像,这可能只会在打印时调用,用于onbeforeprint

    【讨论】:

    【解决方案3】:

    尝试用你自己的屏蔽原生 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);
      }
    
    }())
    

    更新:cmets。

    【讨论】:

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

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

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

    但是,我想了解如何获取正确的信息,以便我可以确定该页面实际上是打印的。

    【讨论】:

      猜你喜欢
      • 2011-05-11
      • 1970-01-01
      • 2013-01-19
      • 1970-01-01
      • 2018-07-20
      • 1970-01-01
      • 1970-01-01
      • 2013-09-25
      • 1970-01-01
      相关资源
      最近更新 更多