How to Disable Outbound Links in Embedded SWF

SWF IconOver the last couple months I’ve been developing some digital signage kiosk software for shopping malls in Southern California. One requirement of this software is that it should cycle content (advertisements, coupons, videos, etc) and provide touchscreen features (print coupons, signup for mall events) on-demand without ever being interrupted.

The kiosks should NEVER be instructed to navigate to an external website or URL because this would break the automated content cycle.

As we progressed through several development phases, what initially seemed easy – keeping the kiosk cycle running 24/7 – soon became a difficult task. We also had the problem of getting people to actually use the kiosks. Who wants to be sucked into an advertising loop anyhow? So we started adding more features in order to bring awareness and attention to the usefulness of the kiosks.

By now we had live traffic reports from Google Maps, movie trailers and funny videos provided by YouTube, up-to-the-minute news from Yahoo, etc. Super nifty stuff…but we had one underlying problem. The SWF movies that were being embedded from Google/YouTube contained links, logos and popup ads that someone could actually click and force the kiosk to navigate to an external website or URL. This was very bad news for the kiosks; it meant we would have to block these internal SWF links entirely or stop using our new features.

I needed a way to disable ALL outbound links in these embedded SWF movies. And my intuitiveness continues to scream there’s a way even though I wasn’t finding one. At first I tried setting an attribute on the SWF movie object “allowScriptAccess” to “never”. This effectively prevents external website/URL navigation for any SWF movie that didn’t need to be controlled via Javascript methods. However for the YouTube Chromeless Player, the kiosk needed to control the playback and status of the video automatically via Javascript, so I needed something else.

What I found was pretty elegant. With modern CSS we can overlay an invisible div element directly on top of the SWF object using “position:absolute” and “z-index”. Now whenever a user touched/clicked on the SWF, they weren’t actually interacting with the SWF movie at all, rather they were poking at an invisible overlay div!

Something like this:

<div id="container_div">
<object width="800" height="530" type="application/x-shockwave-flash" id="my_swf" style="position:absolute;"><param name="allowScriptAccess" value="always"><param name="wmode" value="transparent"></object>
<div id="internal_div" style="z-index: 3; position: absolute; width: 800px; height: 530px;" onclick="return false;"></div>
</div>

Note the following:

  • Both the swf object and internal div are wrapped in a container div.
  • Both the swf object and internal div are set to absolute position.
  • Both the swf object and internal div are sized to 800×530 pixels.
  • The internal div has a higher z-index than the swf object so it gets placed “on top” of the swf object.
  • The swf object has the wmode parameter set to “transparent” which allows other html elements to sit “on top” of the swf movie. Otherwise an swf is by nature “on top” of every other html element.

You might also be able to accomplish this technique similarly by using a transparent swf movie instead of the internal div.

Optionally, you might also be able to prevent external navigation by handling the browser’s “onbeforeunload” event with Javascript, which fires just before the browser navigates to the new URL. By intercepting and cancelling this event, you should be able to prevent external navigation. Example here.

Related

Tags: , , , ,

10 Comments

  1. HI!

    Would you mind providing the exact code for this please? That would help very much.

    Thank you!!!

    Scott

  2. Thanks for the info….this worked perfectly when nothing else would!

  3. Hello, I know it is old post but I hope you will replay. I copy and paste your code and it wont work.
    I also have if I delete embed from my code then I cant play swf at all.
    Please can you edit my code that works, thanks.

  4. I tried to paste a code in comment but it is not possible.
    Please mail me.

  5. Worked fantastic for me. Thank you very much!

  6. Love it !

    Thanks a lots 🙂

  7. Not work for me.

  8. Syed Hassan Raza says:

    Thanks Alotttttttttttttttttttt………….Worked for me……………………

  9. Great article Sir..
    But it’ just cover tho object by transparent css trick. Not disable outbon link.. it’s work for movie swf file but not work for swf games file.. CMII

Leave a Reply

Your email address will not be published. Required fields are marked *