javascript - 使用 window.print() 时失去焦点

Question

在尝试可以让您的生活更轻松的新事物时，我看到了一些引起我注意的东西。当您选择页面的某些部分然后右键单击它时，您可以打印该特定部分。所以..我的猜测是“使用选择 API 然后打印它!”，但它并没有真正进行得那么顺利。我真的不知道为什么以及什么时候，但我在尝试使用 window.print() 时失去了注意力
这是我在 stackoverflow 的控制台中尝试的示例代码。知道如何让它工作吗？也许 window.print() 是在这里使用的错误方法？

setTimeout(function () {
    var el = document.getElementsByClassName('default prettyprint prettyprinted')[0];
    window.getSelection().selectAllChildren(el);
    window.print();
}, 3000);

我正在选择什么然后点击打印 我打印的内容

Answer 1

您正在失去焦点，因为浏览器将启动 native 打印 api，这通常还包括打开打印对话框或打印预览。当通过单击与该对话框交互时，文本失去焦点。(在 Chrome 中，其他浏览器未测试)

使用monitorEvents我可以告诉你“会发生什么”

monitorEvents(window);
 window.getSelection().selectAllChildren(document.getElementsByClassName('post-text')[0]);
window.print();

pointerover PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
VM324:1 mouseover MouseEvent {isTrusted: true, screenX: -1644, screenY: 153, clientX: 276, clientY: 60, …}
VM324:1 pointermove PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
VM324:1 mousemove MouseEvent {isTrusted: true, screenX: -1644, screenY: 153, clientX: 276, clientY: 60, …}
VM324:1 pointerdown PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0.5, …}
VM324:1 mousedown MouseEvent {isTrusted: true, screenX: -1644, screenY: 153, clientX: 276, clientY: 60, …}
VM324:1 pointermove PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0.5, …}
VM324:1 mousemove MouseEvent {isTrusted: true, screenX: -1634, screenY: 205, clientX: 286, clientY: 112, …}
VM324:1 pointerup PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
VM324:1 mouseup MouseEvent {isTrusted: true, screenX: -1634, screenY: 205, clientX: 286, clientY: 112, …}<p></p>

<p><strong>VM324:1 click MouseEvent {isTrusted: true, screenX: -1634, screenY: 205, clientX: 286, clientY: 112, …}</strong>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
</p>

在此示例中使用 chrome，我单击了打印对话框 UI 中的一个按钮。此 mouseup 事件导致焦点消失，显然选择最终被取消。可能 chrome 将打印对话框作为影子 DOM 对象插入，让其上的交互具有文档事件。

我发现，如果我使用转义键退出对话框，则此事件不会传输到全局事件监听器，导致它没有任何效果并让选择持续存在。

因此，如果您想打印该选择，您可以使用如下代码:

+function() {
    // Create an iframe to make sure everything is clean and ordered.
    var iframe = document.createElement('iframe');
    // Give it enough dimension so you can visually check when modifying.
    iframe.width = document.width;
    iframe.height = document.height;
    // Add it to the current document to be sure it has the internal objects set up.
    document.body.append(iframe);

    // Get the node you wish to print.
    var origNode = document.querySelectorAll('.post-text .default.prettyprint.prettyprinted')[0];

    // Clone it and all it's children
    var node = origNode.cloneNode(true);


    /**
     * copied from  https://stackoverflow.com/questions/19784064/set-javascript-computed-style-from-one-element-to-another
     * @author Adi Darachi https://stackoverflow.com/users/2318881/adi-darachi
     */
    var copyComputedStyle = function(from,to){
        var computed_style_object = false;
        //trying to figure out which style object we need to use depense on the browser support
        //so we try until we have one
        computed_style_object = from.currentStyle || document.defaultView.getComputedStyle(from,null);

        //if the browser dose not support both methods we will return null
        if(!computed_style_object) return null;

            var stylePropertyValid = function(name,value){
                        //checking that the value is not a undefined
                return typeof value !== 'undefined' &&
                        //checking that the value is not a object
                        typeof value !== 'object' &&
                        //checking that the value is not a function
                        typeof value !== 'function' &&
                        //checking that we dosent have empty string
                        value.length > 0 &&
                        //checking that the property is not int index ( happens on some browser
                        value != parseInt(value)

            };

        //we iterating the computed style object and compy the style props and the values
        for(property in computed_style_object)
        {
            //checking if the property and value we get are valid sinse browser have different implementations
                if(stylePropertyValid(property,computed_style_object[property]))
                {
                    //applying the style property to the target element
                        to.style[property] = computed_style_object[property];

                }   
        }   

    };
    // Copy the base style.
    copyComputedStyle(origNode, node);

    // Copy over all relevant styles to preserve styling, work the way down the children tree.
    var buildChild = function(masterList, childList) {
        for(c=0; c<masterList.length; c++) {
           var master = masterList[c];
           var child = childList[c];
           copyComputedStyle(master, child);
           if(master.children && master.children.length > 0) {
               buildChild(master.children, child.children);
           }
        }
    }
    if(origNode.children && origNode.children.length > 0) {
        buildChild(origNode.children, node.children);
    }
    // Add the styled clone to the iframe. using contentWindow.document since it seems the be the most widely supported version.
    iframe.contentWindow.document.body.append(node);
    // Print the window
    iframe.contentWindow.print();
    // Give the browser a second to gather the data then remove the iframe.
    window.setTimeout(function() {iframe.parentNode.removeChild(iframe)}, 1000);
}();