swfobject, FB.ui callback, AS3 ExternalInterface and IE not working correctly

Question

I have my swf being loaded using swfobject. From within AS3 I make a call which calls FB.ui to show the pay window. To this point everything works fine. Once the payment is complete, FB.ui calls the callback which is supposed to call back to AS3. I get a reference to the swf object but the actual method call fails with Object doesn't support property or method.

I've been reading every post about this but can't find anything to help. It seems to me that getElementById isn't returning the correct object.

This only happens in IE. Chrome and FireFox work fine.

var attributes = {};            
        attributes.id = "game";
        attributes.name = "game";
        attributes.align = "middle";
        swfobject.embedSWF(
            "game.swf", "flashContent",
            "800", "600",
            swfVersionStr, xiSwfUrlStr,
            flashvars, params, attributes);
        // JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
        swfobject.createCSS("#flashContent", "display:block;text-align:left;");

.....

FB.ui(obj, function(data) { 

          if(!data) {
        alert("There was an error processing your payment. Please try again!");              
        return;
          }

          //  alert('called back order');

          // IMPORTANT: You should pass the data object back to your server to validate
          // the contents, before fulfilling the order.
            var gameVar = document.getElementById("game");
            //alert(gameVar);
            //console.log(Object.prototype.toString.call(gameVar));
        //alert(gameVar.purchaseCallback);
          gameVar.purchaseCallback(data);
          //console.log("Payment verification complete");


        });

          //handle errors here
         //alert('some error');

         return false;
    }

What makes this weirder is if I add the following to the page, clicking the link works. function test() { var game = document.getElementById("game"); alert(game.purchaseCallback); } test

I was so excited when my google search found someone with exactly the same problem I've been banging my head against! This solution doesn't work for me (probably because I have to use wmode: direct, and the pay dialog is showing up behind the swf), but I think it's lead me on a new path to a solution. — roguenet
In case anybody else stumbles through here while trying to solve this problem for a Stage3D game, this post had the full working solution for me: flassari.is/tag/fb-ui — roguenet
@daniel-schaffer Is the solution mentioned by roguenet and jbassking not suitable for you ? — akmozo
@akmozo no, it is! - in fact, I'm going to be giving the bounty to jbassking's answer because it helped me solve something that's been plaguing my app for months! SO doesn't let you award the bounty for 24 hours though. — Daniel Schaffer
@DanielSchaffer OK man, I didn't saw this "One or more of the answers is exemplary and worthy of an additional bounty." ;) — akmozo

jbassking jbassking · Accepted Answer · 2013-12-28T03:32:28

So it turns out the issue is with the visibility. Since FB.ui changes the visibility of the object while the FB.ui dialog is displayed and then changes it back when the dialog is disposed of, the flash app loses it's ExternalInteface.

To correct this I added:

<style>
    #game {
        visibility: visible !important;
    }
</style>

One more thing I should add. In IE 8 this may not work correctly. I made the following change to the params of the swf and it seems to work with everything now.

params.wmode = "opaque";

swfobject, FB.ui callback, AS3 ExternalInterface and IE not working correctly

1 Answers