jQuery append() 到新的 window 不能与 Microsoft Edge 一起使用

Question

Microsoft Edge 在尝试将克隆的内容附加到新的 window 时抛出 'No such interface supported' 错误。这是一个例子：

jQuery(document).ready(function() {
    jQuery('.trigger').click(function() {
        var target = jQuery(this).data('print_target');

        var w = window.open('', '', 'status=no, toolbar=no, menubar=no, location=no');
        var print_html = '<!DOCTYPE html><head><title>' + document.getElementsByTagName('title')[0].innerHTML + '</title></head><body></body></html>';
        w.document.write( print_html );

        var ua = window.navigator.userAgent;
        var ie = true;

        //.html() required for IE browsers
        if ( ua.indexOf("MSIE ") != -1) {
            //console.log('MSIE - Craptastic');
            jQuery(w.document.body).append( jQuery( target ).clone( true ).html() );
        }
        else if ( ua.indexOf("Trident/") != -1) {
            //console.log('IE 11 - Trident');
            jQuery(w.document.body).append( jQuery( target ).clone( true ).html() );
        }
        else if ( ua.indexOf("Edge/") != -1 ){
            console.log('IE 12 - Edge');
            //error: No such interface supported
            jQuery(w.document.body).append( jQuery( target ).clone( true ).html() );

            //works
            //jQuery(w.document.body).append( 'hey dude, this is some text' );

            //works
            //jQuery(w.document.body).html( jQuery( target ).clone( true ).html() );

        }
        else{
            //console.log('proper browser');
            jQuery(w.document.body).append( jQuery( target ).clone( true ) );
            ie = false;
        }
    });
});

这只是 Microsoft Edge 的一个问题，它适用于所有基于标准的浏览器和 IE 浏览器 7、8、9、10 和 11。类似的问题已经 raised in this thread 但没有解决。

这里是一个 jsfiddle 显示什么是什么：https://jsfiddle.net/switzerbaden/nhtywLsp/

Answer 1

经过进一步调查，我发现 jQuery 会在您的 HTML 字符串产生多个顶级同级元素时创建一个 documentFragment。当 Microsoft Edge 尝试将 documentFragment 附加到第二个 window.

时，问题就出现了

目前，我鼓励您将 HTML 传递给仅生成单个顶级元素的 append 方法，两侧为 white-space trimmed .这样，我们可以保证 jQuery 不会尝试附加 documentFragment，而是附加单个元素。

已针对 Microsoft Edge 提交错误，并已通知 jQuery 团队。

我是 Microsoft Edge 团队的一名工程师，我看到了你提到的问题。我将提交一个错误，并进一步调查，但目前，一种解决方法是在您的目标中只有一个子元素，并且 trim 追加时的内容：

<div id="my_target">
    <div>
        <!-- move contents in here -->
    </div>
</div>

$(w.document.body).append(
    // Or, "<div>" + $(target).html() + "</div>"
    $.trim( $(target).clone(true).html() )
);

经过一些粗略的测试，这似乎解决了问题。

Answer 2

首先克隆HTML，然后在前面添加div并在后面关闭：

var new_target = jQuery.trim( jQuery( target ).clone( true ).html() );
jQuery( w.document.body ).append( "<div>" + new_target + "</div>" );

jQuery append() 到新的 window 不能与 Microsoft Edge 一起使用

jQuery append() into new window not working with Microsoft Edge

jquery

internet-explorer

append

microsoft-edge