Javascript 使用window.print（）时失去焦点

在尝试新事物时，我看到了一些吸引我眼球的东西，这些新事物可以让你的生活更轻松。当您选择页面的某些部分，然后右键单击它时，您可以打印此特定部分。所以我的猜测是“使用选择API，然后打印它！”，但它并不是真的进行得很顺利。我真的不知道为什么和什么时候，但在尝试使用window.print（）时，我会失去焦点
这是我在stackoverflow控制台中尝试的示例代码。你知道怎么做吗？也许

window.print（）

这里使用的方法是错误的

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

选择的内容，然后单击“打印” 我得到的是什么

---

您正在失去焦点，因为浏览器将启动本机打印api，通常还包括打开打印对话框或打印预览。当点击该对话框时，文本失去焦点。（在Chrome中，其他浏览器未测试）

通过使用，我可以告诉你“发生了什么”

pointerover PointerEvent{isTrusted:true，pointerId:1，宽度：1，高度：1，压力：0，…}
VM324:1 mouseover MouseEvent{isTrusted:true，screenX:-1644，screenY:153，clientX:276，clientY:60，…}
VM324:1 pointermove PointerEvent{isTrusted:true，pointerId:1，宽度：1，高度：1，压力：0，…}
VM324:1 mousemove MouseEvent{isTrusted:true，screenX:-1644，screenY:153，clientX:276，clientY:60，…}
VM324:1 pointerdown PointerEvent{isTrusted:true，pointerId:1，宽度：1，高度：1，压力：0.5，…}
VM324:1 mousedown MouseEvent{isTrusted:true，screenX:-1644，screenY:153，clientX:276，clientY:60，…}
VM324:1 pointermove PointerEvent{isTrusted:true，pointerId:1，宽度：1，高度：1，压力：0.5，…}
VM324:1 mousemove MouseEvent{isTrusted:true，screenX:-1634，screenY:205，clientX:286，clientY:112，}
VM324:1 pointerup PointerEvent{isTrusted:true，pointerId:1，宽度：1，高度：1，压力：0，…}
VM324:1 mouseup MouseEvent{isTrusted:true，screenX:-1634，screenY:205，clientX:286，clientY:112，}

VM324:1单击鼠标事件{isTrusted:true，screenX:-1634，screenY:205，clientX:286，clientY:112，…}
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

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

我发现，如果使用escape键退出对话框，则此事件不会传输到全局事件侦听器，从而导致它没有任何效果，并让选择保持不变

因此，如果要打印该选择，可以使用如下代码：

+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);
}();

+函数（）{
//创建一个iframe以确保所有内容都干净有序。
var iframe=document.createElement（'iframe'）；
//为其提供足够的尺寸，以便在修改时进行目视检查。
iframe.width=document.width；
iframe.height=document.height；
//将其添加到当前文档中，以确保已设置内部对象。
document.body.append（iframe）；
//获取要打印的节点。
var origNode=document.queryselectoral（'.post-text.default.prettyprint.prettyprinted'）[0]；
//克隆它和它所有的孩子
var node=origNode.cloneNode（true）；
/**
*抄袭https://stackoverflow.com/questions/19784064/set-javascript-computed-style-from-one-element-to-another
*@作者阿迪·达拉吉https://stackoverflow.com/users/2318881/adi-darachi
*/
var copyComputedStyle=函数（从，到）{
var计算的\u样式\u对象=false；
//试图找出我们需要使用的样式对象取决于浏览器支持
//所以我们会一直努力，直到找到一个为止
computed_style_object=from.currentStyle | document.defaultView.getComputedStyle（from，null）；
//如果浏览器不支持这两种方法，我们将返回null
如果（！computed_style_object）返回null；
var stylePropertyValid=函数（名称、值）{
//检查该值是否不是未定义的
返回值的类型！==“未定义”&&
//检查值是否不是对象
值的类型！=“对象”&&
//检查该值是否不是函数
值的类型！=“函数”&&
//检查我们没有空字符串
value.length>0&&
//检查属性是否不是int-index（在某些浏览器上发生
值！=parseInt（值）
};
//我们迭代计算的样式对象，并比较样式道具和值
for（计算的\u样式\u对象中的属性）
{
//检查我们获取的属性和值是否有效，因为浏览器有不同的实现
if（stylePropertyValid（属性，计算的\u样式\u对象[属性]）
{
//将样式特性应用于目标元素
to.style[property]=计算的_style_对象[property]；
}   
}   
};
//复制基础样式。
copyComputedStyle（原始节点、节点）；
//复制所有相关样式以保留样式，沿子树向下操作。
var buildChild=函数（主列表、子列表）{
对于（c=0；c0）{
buildChild（master.children，child.children）；
}
}
}
if（origNode.children&&origNode.children.length>0）{
buildChild（origNode.children，node.children）；
}
//使用contentWindow.document将样式化克隆添加到iframe中，因为它似乎是最受广泛支持的版本

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, …}


VM324:1 click MouseEvent {isTrusted: true, screenX: -1634, screenY: 205, clientX: 286, clientY: 112, …}
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+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);
}();