Avoiding click-to-activate

Click to activate

Some browsers recently made a change to the way they handle plugin content. Some plugin content will need to be clicked by the user before they can interact with it. Until then, the plugin content will be displayed, including with any animations and sounds, but they will not be able to interact with the user's mouse. Typically, the browser will display a tooltip when the plugin is hovered, telling the user "Click to activate and use this control".

For now, this affects Internet Explorer 6-7 (and other browsers using its engine) and Opera 9+. However, it may soon extend to affect all browsers and browser engines produced by commercial companies, such as Safari, Omniweb, iCab, etc. Since Mozilla/Firefox is developed by the commercial Mozilla corporation, it may also not escape, and since many parts of Konqueror are produced by commercial companies (such as Trolltech), even they may not be immune. (Note that IE 7 removed click-to-activate in April 2008.)

This article does not deal with why this is happening. For that, you should read the Wikipedia article. I will not give any further information. This article will only deal with the fact that this is happening, so if your site uses plugin content, you may need to make certain alterations to it, or risk annoying all of your visitors.

There are several ways to add plugin content to a page, and it will depend on how it is added, as to whether or not the user will need to click to activate the plugin. So to avoid annoying your users, you only have to add the plugin content in a way that does not trigger this behaviour.

What triggers it

If the plugin content is added using normal HTML markup, using the OBJECT, EMBED, or APPLET elements.
If the OBJECT, EMBED, or APPLET elements are added to the page by a script that is embedded within the markup of the page:
- Using document.write
- Using DOM methods to create and append it
- Using innerHTML or equivalent

Note that this only applies to OBJECT elements that actually invoke a third party plugin application. For example, if an SVG is embedded using the OBJECT element, it will not need to be clicked to activate it in Opera, as Opera 8+ can natively display SVG images. However, if an Internet Explorer user has installed the Adobe SVG viewer plugin, then they will have to click to activate it.

What does not trigger it

If the OBJECT, EMBED, or APPLET elements are added to the page by a script in an external script file:
- Using document.write
- Using innerHTML or equivalent
- Using DOM methods to create and append it
If the plugin content is viewed separately, not as part of the page itself.
If the plugin content is embedded directly in an iframe.
If the plugin content is viewed in an external viewer, not embedded in the page.

What will your page need to do

Quite simply, create the required elements using JavaScript, and make sure the script is held in an external script file. It does not matter if the new HTML or DOM elements are prepared by a script in the document itself, as long as the script command that actually adds it to the document is inside the external file.

You can then use <noscript> to add it without script. Users with script disabled will still have to click, but not many users will disable script but allow plugins anyway, and users that have script enabled will not have to click to activate. The plugin should keep working the way it always has, including with JavaScript interaction.

You could also put it in an iframe, but this will then break the semantics of any scripting.

Using a script is fairly easy. Generally, it is easiest to keep it in the same script file, but you may, for example, want to create a function in an external file that writes the new code onto the page, but have inline scripts on the page that call the function in that external file, passing it the code to add.

Using document.write

This is the most browser compatible of all techniques, as it is supported by all script supporting browsers.

var obHTML = '<object ...>' +
  '<param name="URL" value="example.mpeg">'+
  '<embed src="example.mpeg" ...>'+
  '<\/object>';
//the next line needs to be in an external file
document.write(obHTML);

Using innerHTML or equivalent

The is the next most browser compatible of all techniques, and works in all current browsers.

var obHTML = '<object ...>' +
  '<param name="URL" value="example.mpeg">'+
  '<embed src="example.mpeg" ...>'+
  '<\/object>';
//the next line needs to be in an external file
document.getElementById('containobj').innerHTML = obHTML;

Using DOM methods to create and append it

The requires a DOM capable browser.

var newOb = document.createElement('object');
//the next line needs to be in an external file
document.getElementById('containobj').appendChild(newOb);
newOb.width = '100';
newOb.height = '100';
newOb.URL = 'example.mpeg';

Something for users

Opera users can use a User JavaScript that automatically applies this fix to all plugin content.