Make WebObjects Interactive when using UseWidget7

I know there has been a ton of discussion on how to have your Widgets/WebObjects/HTML5 Animations follow the stacking order by using UseWidget7 in the AdobeCaptivate.ini file.

Unfortunately in Chrome, sometimes in IE you lose all interactivity when setting UseWidget7 to 1.

Well I finally had a project where this became a serious issue as well, so I decided to dedicate a Saturday to solving this issue.

And here it is. Insert this JavaScript in the head of your index.html or the index.html template and it will automatically restore the interactivity of any WebObject while keeping the stacking order.

interfaceObj, eventEmitterObj, interval;

window.addEventListener( 'moduleReadyEvent', function ( e )
{
interfaceObj = e.Data;
eventEmitterObj = interfaceObj.getEventEmitter();
initializeEventListeners();
});

function initializeEventListeners()
{ 
if ( interfaceObj )
{
  if ( eventEmitterObj )
  {
   eventEmitterObj.addEventListener( 'CPAPI_SLIDEENTER', function ( e )
   {        
    interval = setInterval( checkExists, 100, e )
   });
  }
}
}

function checkExists( e )
{
if ( cp.model.data.project_main.useWidgetVersion7 == true )
{
  var getFrame = document.getElementsByTagName( 'iframe' );
 
  if ( getFrame.length > 0 )
  {
   clearInterval( interval );
   interval = null;
 
   var myFrame = getFrame[ 0 ].id;
   var str = myFrame.substring( myFrame.indexOf( '_' ) + 1 );
   var frameCover = str.substring( 0, str.length - 1 );
  
   if ( frameCover )
   {
    document.getElementById( str.substring( 0, str.length - 1 ) ).style.visibility = 'hidden';
    document.getElementById( str.substring( 0, str.length - 1 ) ).style.pointerEvents = 'none';
   }
  }
}
else
{
  clearInterval( interval );
  interval = null;
}
}