通过键盘触发 JQuery Modal Box 的 Ctrl+P 打印 [英] Trigger Ctrl+P printing for a JQuery Modal Box through keyboard

查看:51
本文介绍了通过键盘触发 JQuery Modal Box 的 Ctrl+P 打印的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个文档,它在网站上的 JQuery 模态框内弹出.文档末尾有一个打印按钮,它只是在弹出框中打印文档.

我正在寻找一种可以通过按 Ctrl+P 打印弹出框的解决方案.现在 Ctrl+p 打印包括背景在内的所有页面......我只是希望找到一个解决方案来帮助我仅在弹出窗口中打印文档.

我的 JQuery 模态框在 iFrame 中,显示方式如下:-

<iframe id="lightboxFrame" width="950px" scrolling="auto" height="500px"><!DOCTYPE html><头><身体>(Div 中的整个文档)</body>...

这是打印弹出文档的弹出 HTML 中的 DIV.

<input id="print-submit" class="form-submit" value="Print this Survey" name="print" onclick="printAssessment()" type="button"/>

这就是我所做的:-

 $(document).keydown(function(event) {if (event.ctrlKey==true && (event.which == '80')) {//cntrl + pevent.preventDefault();打印评估();}});函数打印评估(){//alert("打印小页面");窗口.打印();}

当我按 Ctrl+P 时肯定会调用该函数,但它仍会打印整个页面.我希望它只打印模态框.奇怪的是,当我按下使用相同功能的模态框内的打印按钮时,它打印正确.

谢谢,

第一次-

现在部分工作.

当我将 PrintAssessment() 的函数更改为以下内容时,它起作用了:-

 function printAssessment() {window.frames["lightboxFrame"].focus();window.frames["lightboxFrame"].print();}

但是,奇怪的是它仅在我第一次单击 Ctrl+P 时打印.当我再次尝试打印时,它不断给我这个错误:-

未捕获的类型错误:无法调用未定义的方法打印"

未捕获的类型错误:无法调用未定义的方法焦点"

谢谢.

解决方案

代替:

 window.print();

您可以像下面这样打印 iframe 的内容:

$('#lightboxFrame')[0].contentWindow.print();

将下面的代码放入你的函数printAssessment()

I have a document which pops up on the site within a JQuery Modal Box. The document has a print button at the end which just prints the document in the Pop-Up Box.

I am looking to find a solution that I can print the pop-up box by pressing Ctrl+P. Right now Ctrl+p prints all the page including the background ... I am just hoping to find a solution which helps me print the document in the pop-up only.

My JQuery Modal Box is in iFrame and is shown in the following way:-

<div id="frameContainer">
      <iframe id="lightboxFrame" width="950px" scrolling="auto" height="500px">
         <!DOCTYPE html>
           <html>
             <head>
                <body> (Whole Document in a Div) </body>
             ...

This is the DIV in the pop-up HTML that prints the pop-up document.

<div id="edit-actions" class="form-actions form-wrapper">
   <input id="print-submit" class="form-submit" value="Print this Survey" name="print" onclick="printAssessment()" type="button" />
</div>

This is what I did:-

 $(document).keydown(function(event) {
        if (event.ctrlKey==true && (event.which == '80')) { //cntrl + p
            event.preventDefault();
            printAssessment();
        }
    });

    function printAssessment() {
        //alert("Print the little page");
        window.print();
    }

The function is definitely being called when I press Ctrl+P but it still prints the whole page. I want that it prints only the Modal Box. Weirdly, when I press the print button inside the Modal Box, which uses the same function, it prints correctly.

Thanks,

FIRST EDIT:-

Partially working now.

When I changed the function of PrintAssessment() to the following, it works:-

  function printAssessment() {

        window.frames["lightboxFrame"].focus();
        window.frames["lightboxFrame"].print();

    }

But, the weird thing is that It prints when I click Ctrl+P only the first time. When I try to print again, it keeps giving me this error:-

Uncaught TypeError: Cannot call method 'print' of undefined 

or

Uncaught TypeError: Cannot call method 'focus' of undefined 

Thanks.

解决方案

Instead of :

 window.print();

You can print the content of the iframe like following :

$('#lightboxFrame')[0].contentWindow.print();

Put the code bellow in your function printAssessment()

这篇关于通过键盘触发 JQuery Modal Box 的 Ctrl+P 打印的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆