Question

我从一位不在我们公司的前同事那里找到了以下代码：

    var w = window.open('', 'print_window', 'width = 1000, height = 1000');
    w.document.write('<html><head><title>Printout</title>' + '<link rel="stylesheet" href="' + document.styleSheets[0].href + '"></head><body>');
    w.document.write(modal.dom.root.innerHTML);
    w.document.write('</body></html>');

    setTimeout(function() {
        $(w.document.body).find('.modal-print').remove();
        w.document.close();
        w.focus();
        w.print();
        w.close();
    }, 500);

我想减少代码中setTimeout次调用的数量，并想知道为什么这里有setTimeout。我想删除它，但我想有一个原因，它首先被添加。有谁知道为什么它可以在那里，如果它可以安全删除，所以代码看起来像这样？

    var w = window.open('', 'print_window', 'width = 1000, height = 1000');
    w.document.write('<html><head><title>Printout</title>' + '<link rel="stylesheet" href="' + document.styleSheets[0].href + '"></head><body>');
    w.document.write(modal.dom.root.innerHTML);
    w.document.write('</body></html>');

    $(w.document.body).find('.modal-print').remove();
    w.document.close();
    w.focus();
    w.print();
    w.close();

我的猜测是他正在等待加载样式表。所以，等待DOM ready或load事件可能是一个很好的替代品，虽然我不知道在添加样式表之后是否会触发这些事件，因为在将代码添加到新窗口之前调用了window.open() ：

准备活动版本：

    var w = window.open('', 'print_window', 'width = 1000, height = 1000');
    w.document.write('<html><head><title>Printout</title>' + '<link rel="stylesheet" href="' + document.styleSheets[0].href + '"></head><body>');
    w.document.write(modal.dom.root.innerHTML);
    w.document.write('</body></html>');

    // Will ready event be fired? If yes, at the right time?
    $(w.document).ready(function () {
        $(w.document.body).find('.modal-print').remove();
        w.document.close();
        w.focus();
        w.print();
        w.close();
    });

带有加载事件的版本：

    var w = window.open('', 'print_window', 'width = 1000, height = 1000');
    w.document.write('<html><head><title>Printout</title>' + '<link rel="stylesheet" href="' + document.styleSheets[0].href + '"></head><body>');
    w.document.write(modal.dom.root.innerHTML);
    w.document.write('</body></html>');

    // Will ready event be fired? If yes, at the right time?
    $(w).load(function () {
        $(w.document.body).find('.modal-print').remove();
        w.document.close();
        w.focus();
        w.print();
        w.close();
    });

Answer 1

仅供参考。我在评论中提到的代码，我们在面对同样的问题后最终使用了这些代码：

function printHTML( html ) {
    var tab,
        interval;
    if (html) {
        tab = window.open($.ajax.host + $.ajax.directory + 'dist/res/print.html');
        interval = setInterval(function() {
            var body;
            // loop until the tab is opened, the tab has a document and the DOM has been parsed and is ready to be query'ed.
            if (tab && tab.document && tab.document.querySelector) body = tab.document.querySelector('body');
            if (body) {
                body.innerHTML = html.outerHTML;
                timeout again for the print function, so that the body has time to do a paint + reflow, so we are sure that the html has been written to the new tab.
                setTimeout(function() { 
                    // print and clean up
                    tab.print();
                    tab.close();
                    clearInterval(interval);
                }, 1)
            }
        }, 100);
    }
    else throw new Error("This report doesn't have a print version.");
}

Answer 2

为什么不在文档中添加以下样式，而不是使用close删除该部分...

setTimeout

这将隐藏该部分，而不是删除它，但可能这就是您所需要的。

您还可以添加...

<style media="print">
  .modal-print {
    display: none;
  }
</style>

然后你根本不需要<script> window.print(); window.close(); </script>，因为它都在你创建的文档中。

在window.open（）之后可以删除这个setTimeout吗？

2 个答案: