HTML embedding Flash, ExternalInterface, and display: none

Although this situation is very unlikely to happen, I actually came across one today (work requirement, by the way), so I decided to share my observation; hope it might help clear some fog somewhere:

If a Flash file (.swf) is embedded into an HTML page then made hidden (i.e. its container div’s CSS attribute “display” set to “none”), it will never receive function invocation requests from the external environment (i.e. via ExternalInterface::addCallback). The console log will stay silent and even though your code is flawless, nothing will get called and executed.

The solution? Don’t hide your Flash object the CSS way. One of the workarounds is to set width = 0 and height = 0 in your embed code.

My dev environment at the time: Flash Player 12.0.0.77 on Google Chrome 33.0.1750.149

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s