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

问题

Microsoft Edge is throwing 'No such interface supported' error when trying to append cloned content into new window. Here is an example:

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

This is only an issue with Microsoft Edge, it works in all standards based browsers and IE browsers 7,8,9,10 and 11. A similar issue has been raised in this thread but not resolved.

here is a jsfiddle showing what's what: https://jsfiddle.net/switzerbaden/nhtywLsp/

回答1:

First clone the HTML, then add div before and close it after:

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

回答2:

After further investigation, I've found that jQuery will create a documentFragment when your HTML string yields multiple top-level sibling elements. The problem arrises when Microsoft Edge attempts to append the documentFragment to the second window.

For now, I would encourage you to pass HTML to the append method that yields only a single top-level element, with white-space trimmed from both sides. This way, we are guaranteed that jQuery will not attempt to append a documentFragment, but instead a single element.

A bug has been filed against Microsoft Edge, and the jQuery team has been notified.

I am an engineer on the Microsoft Edge team, and I see the issue you are referring to. I'm going to file a bug, and investigate this further, but for the time being, one work around is to have only a single child element in your target, and trim the content when appending:

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

After some cursory testing, this appears to resolve the issue.

来源：https://stackoverflow.com/questions/38591575/jquery-append-into-new-window-not-working-with-microsoft-edge

标签

jquery

internet-explorer

append

microsoft-edge