JavascriptjQuery: delete iframe after contentWindow.print - Stack Overflow

admin管理员组

文章数量:1402995

I'm using this code, which has stemmed from here and here.

$('#my_button').on('click', function (e) {
    var iframe = document.createElement('iframe');
    iframe.id = "my_iframe";
    iframe.onload = function() {
        var doc = iframe.contentDocument || iframe.contentWindow.document;
        doc.getElementsByTagName('body')[0].innerHTML = "<p>test123</p>";

        iframe.contentWindow.focus(); 
        iframe.contentWindow.print();

        $("#my_iframe", top.document).remove();
    };

    document.getElementsByTagName('body')[0].appendChild(iframe);
});

Without the remove line, it prints fine. However, the remove line removes the iframe before it has a chance to execute the print(). How can I set up some kind of callback so that it prints and only then removes the iframe?

Thanks.

I'm using this code, which has stemmed from here and here.

$('#my_button').on('click', function (e) {
    var iframe = document.createElement('iframe');
    iframe.id = "my_iframe";
    iframe.onload = function() {
        var doc = iframe.contentDocument || iframe.contentWindow.document;
        doc.getElementsByTagName('body')[0].innerHTML = "<p>test123</p>";

        iframe.contentWindow.focus(); 
        iframe.contentWindow.print();

        $("#my_iframe", top.document).remove();
    };

    document.getElementsByTagName('body')[0].appendChild(iframe);
});

Without the remove line, it prints fine. However, the remove line removes the iframe before it has a chance to execute the print(). How can I set up some kind of callback so that it prints and only then removes the iframe?

Thanks.

• javascript
• jquery
• iframe
• printing

Share Improve this question Follow edited May 23, 2017 at 10:28 CommunityBot 111 silver badge asked Aug 15, 2012 at 8:22 NickNick 6,0351212 gold badges5656 silver badges8080 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I found this solution when I was searching for print event detection:

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

Here I add the JS code as requested by Stano, but it is important to also read the whole linked post as there are limitations to this approach. In general the post is about the onafterprint event that only works in IE and a solution to make that event work in other browsers.

(function() {
    var beforePrint = function() {
        console.log('Functionality to run before printing.');
    };
    var afterPrint = function() {
        console.log('Functionality to run after printing');
    };

    if (window.matchMedia) {
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener(function(mql) {
            if (mql.matches) {
                beforePrint();
            } else {
                afterPrint();
            }
        });
    }

    window.onbeforeprint = beforePrint;
    window.onafterprint = afterPrint;
}());

create a function like this:

function printIframe(iframe,callback) {
  iframe.contentWindow.print();
  if (callback && typeof(callback) === "function") {
    // execute the callback, passing parameters as necessary
    callback();
  }
}

and call it instead of the other two functions like this. printIframe(iframe,function(){ $("#my_iframe", top.document).remove();})

if you like you can also put in a delay using the setTimeout.

setTimeout(function() {alert('hello');},1250);

本文标签： JavascriptjQuery delete iframe after contentWindowprintStack Overflow