Main Menu
Home
Forums
CSS
JavaScript
HTML & XML
Web Design
Web Dev
Downloads
Industry and Site News
Security Alerts
Web Dev Reference
Search
Who's Online
We have 1 guest online
Popular
Syndicate
Activate X — Activating ActiveX Controls with the DOM PDF Print E-mail
Tuesday, 18 July 2006

Do you want the fastest, easiest, most robust way to fix the ActiveX activation issue, without having to re-code legacy HTML pages? Um, yeh, of course. This article discusses my solution, which involves a simple reference to an external JavaScript file — without having to alter the existing HTML of legacy pages.

The Solution

Just link my script to your HTML pages as an external file.

  1. Download activate_x.js
  2. Upload it to your Web site
  3. Link to using a <script> element like so:
    <script type="text/javascript" src="/path/to/where/you/put/activate_x.js"></script>

How it Works

While the end result is the same as all the other scripts, the method saves YOU from having to remove any existing <object> code from your HTML files. In fact, the existing <object> code will be read in by my script and used to re-write the exact same code, which activates the ActiveX object. This approach still writes out the HTML for the <object> element using an external script, so it meets the requirement from Microsoft and activates the ActiveX control for user interaction.

The best explanation is a code example, with lots of comments in the code. First, here is what the code does (followed by a code example):

  1. Checks if outerHTML is supported, if so, runs (works only in IE, which is what want)
  2. Works on all <object> elements in page, which is what we want to activate
  3. Clones each object node, to get the HTML the script needs to re-write to the page
  4. Gets the parentNode of each object node, which the script uses to remove and re-write the object HTML code.
  5. Gets the nextSibling of each object node, so the script knows where write the HTML back into the correct position in the document tree.
  6. Creates a new <div> element, to be used for inserting the new HTML <object> code. You can't just write the HTML back in. It's easier to just create an empty div, place that using the DOM, and then write the HTML into the new div node.
  7. Remove the existing <object> node.
  8. Finally, re-writes the object HTML back in, which activates the ActiveX control for user interaction.
 
 
// This code is in activate_x.js
 
function activate_x()
{ // outerHTML is non-W3C compliant, so make sure it's still supported
  if(document.body.outerHTML) 
  // Get array of object elements as nodes
  var objects = document.getElementsByTagName("object");
  // Iterate over array of object element nodes
  for(var i=0;i<objects.length;i++) 
  { // Get reference to current object element node in array
    var obj = objects[i]; 
    // Clone the object element node, including it's children (true)
    var clone = obj.cloneNode(true); 
    // Get parent node of object element node
    var parent = obj.parentNode; 
    // Use next sibling to know where to position clone in same spot as original
    var next = obj.nextSibling; 
    // Create new div element node to hold HTML of clone later
    var div = document.createElement("div"); 
    // Use the parent node to remove the object element node
    parent.removeChild(obj); 
    // Insert the new div node to hold the HTML of the clone node
    parent.insertBefore(div,next); 
    // Must use HTML for this trick to work
    // Cannot just append a node to activate ActiveX
    // Then use the cloned object element node to re-add the object element
    div.innerHTML = clone.outerHTML; 
    }
  }
}

Using this Code

As stated in the introduction, using this code is as simple as linking to activate_x.js from each of you HTML pages, like this:

 
 
<script type="text/javascript" src="/path/to/where/you/put/activate_x.js"></script>
 

Browser Compatibility

This script has not been thoroughly tested in all major Web browsers. It has been tested in:

  • Internet Explorer 6.0
  • Firefox 1.5

At this point, you might want to use Internet Explorer conditionals to make sure it is loaded only in Internet Explorer:

 
 
<!--[if IE]>
<script type="text/javascript" src="/path/to/where/you/put/activate_x.js"></script>
<![endif]-->
 

Conclusion

I just wrote this script and it needs more testing. Please help us out. Test the script and post any problems/suggestions on the JavaScript forum here:

Comment on activate_x.js

This script should save developers a lot of time. It's easier to just link to this script than it is to remove existing HTML in legacy pages and then use an external script to write it back in. This script automates that process dynamically using JavaScript and the Web browser DOM.

Last Updated ( Tuesday, 18 July 2006 )
 
Next >