SwitzerBaden SwitzerBaden - 4 years ago 378
jQuery Question

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/

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download