| Activate X — Activating ActiveX Controls with the DOM |
|
|
|
| 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 SolutionJust link my script to your HTML pages as an external file.
How it WorksWhile 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):
// 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 CodeAs 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 CompatibilityThis script has not been thoroughly tested in all major Web browsers. It has been tested in:
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]--> ConclusionI 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: 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 > |
|---|










