IE9 Bug/Feature - Iframe removed from DOM containing API (Javascript/jQuery)

This is an issue which has taken me several days to fix, but this has been my first time working with js/jQuery.

The issue is detailed here: MSDN

In summary IE9 doesn't allow an iframe to be removed from the DOM if it will have javascript executed. This is to address a memory leak issue. IE9 will throw undefined property errors.

This affects multiple modal plugins out there and would probably be more effectively addressed in the colorbox library but that's a little beyond my skill level.

The two ways of fixing this issue are either to append the iframe to an element in the DOM, load the content and then remove it from the DOM again, or change when the src is loaded which is what I've done. To keep IE9 happy you have to also unload the src (or append to the DOM) before the modal is closed otherwise an endless number of errors.

Thankfully Colorbox has hooks for each of the key points in the open/close process to bind to. Below are the additions made to colorbox.js (sites/all/modules/colorbox/js/colorbox.js):

  $(document).bind('cbox_open', function(){ 
	  uhref = $("#IframeID").attr('src');
	   $("#IframeID").attr('src', "about:blank");

//

  $(document).bind('cbox_complete', function(){
	$("#IframeID").attr('src', uhref); 

// 

  $(document).bind('cbox_cleanup', function(){ 
	  $("#IframeID").attr('src', "about:blank");

//

  $(document).bind('cbox_closed', function(){ 
	  $("#IframeID").attr('src', "about:blank");

Full code looks like this with additions to prevent the parent window from scrolling. This was altered for youtube videos inside a colorbox:

(function ($) {
	
	uhref = "" //define global var

Drupal.behaviors.initColorbox = {
  attach: function (context, settings) {
    if (!$.isFunction($.colorbox)) {
      return;
    }
    $('a, area, input', context)
      .filter('.colorbox')
      .once('init-colorbox-processed')
      .colorbox(settings.colorbox);
  }
};

{
    $(document).bind('cbox_open', function(){ 
	    $('body').css({overflow:'hidden'});                      //prevent background scrolling
	 	 uhref = $(".youtube-player").attr('src');          //get src before it's loaded/changed
	  	$(".youtube-player").attr('src', "about:blank");  //change src before IE9 chokes on it
	  	$('#slideshow-div').rsfSlideshow('toggleShow'); //stop slideshow - performance issues on older machines
  });
}

{
  $(document).bind('cbox_complete', function () {
    Drupal.attachBehaviors('#cboxLoadedContent');
	 $(".youtube-player").attr('src', uhref);                   //reload the correct src now that cbox has finished loading
  });
}

{
  $(document).bind('cbox_cleanup', function(){ 
	  $(".youtube-player").attr('src', "about:blank");      //remove src again so IE9 doesn't present endless '__flash__' js errors
  });
}

{
      $(document).bind('cbox_closed', function(){ 
      	$('body').css({overflow:'auto'});                              //allow scrolling again on parent window
	  	  $('#slideshow-div').rsfSlideshow('toggleShow'); //restart slideshow - performance issues on older machines
  });
}

})(jQuery);

This would need a dynamic way of looking for iframe content and finding the iframe class or id to be applied to this module.

Hope this is helpful to someone.