Flash Activation: Browser Comparison - Plugins 编辑

Each of the major browsers has now implemented a feature where Adobe Flash content does not run by default, but each of the browsers has implemented this feature and the user interface in slightly different ways. This guide will help outline the similarities and differences between the browsers so web developers can provide the best user experience. Another guide is available to assist website authors in migrating away from Flash.

In each browser, the decision to enable Flash is made by users on a per-site basis. When a site attempts to use Flash, the browser will prompt the user in some way and give the user an opportunity to enable Flash for that site. Flash-blocking extensions are no longer necessary because this functionality is now built into the browser.

Each of the browser vendors has a roadmap about the future of Flash and changes to the user experience. The Firefox Flash roadmap includes links to roadmaps and posts from other vendors.

UI Comparison

Mozilla Firefox

In-page UI is displayed when the site attempts to use Flash. An icon also appears on the left side of the location bar. The user can click on the Flash object or the location bar icon to activate Flash:

Users have the choice to allow Flash just for the current session, or to remember their choice:

Google Chrome

In-page UI is displayed when the site attempts to use Flash without fallback content:

A user can click the plugin element to show a prompt for allowing Flash:

If the site provides fallback content for an object element, Chrome will display that content and will not prompt the user to enable Flash. If a Flash element is not visible to the user, the user will not get a visible prompt.

A user can click the information icon on the left side of the location bar on any site to open the site information and allow Flash on that site:

Microsoft Edge

In-page UI is displayed when the site attempts to use Flash. An icon also appears on the right side of the location bar. The user can click the Flash object to show activation options:

Users have the choice to allow Flash just for the current session, or to remember their choice:

Site Authoring Tips

If a Flash element is very small, hidden, or covered by other content, users will probably not notice that Flash is required and will become confused. Even if the plugin element will eventually be hidden, pages should create the plugin element so that it's visible on the page, and should resize or hide it only after the user has activated the plugin. This can be done by calling a JavaScript function when the plugin is activated:

function pluginCreated() {
  // We don't need to see the plugin, so hide it by resizing
  var plugin = document.getElementById('myPlugin');
  plugin.height = 0;
  plugin.width = 0;
  plugin.callPluginMethod();
}

The HTML, by default, specifies the Flash object to be a size that makes it visible, like this:

<!-- Give the plugin an initial size so it is visible -->
<object type="application/x-shockwave-flash" data="myapp.swf"
      id="myPlugin" width="300" height="300">
  <param name="callback" value="pluginCreated()">
</object>

The callback parameter defined in the HTML can be called in Flash using its flash.external.ExternalInterface API.

Using a script callback to determine when a plugin is activated

Similarly, a site's script shouldn't attempt to script a plugin immediately upon creation. Instead, the plugin object should call into a JavaScript function upon creation. That function can then issue the call into the plugin, knowing that everything is set up and ready to go.

First, set your up your HTML with a callback that calls the JavaScript function pluginCreated(), like this:

<object type="application/x-my-plugin" data="somedata.mytype" id="myPlugin">
  <param name="callback" value="pluginCreated()">
</object>

The pluginCreated() function is then responsible for the setup of your script and any calls back into the plugin that you need to make:

function pluginCreated() {
  document.getElementById('myPlugin').callPluginMethod();
}