Changing HTML content dynamically with JS before ActiveX component has finished loading

Question

I have an HTML page, which performs the following actions (in order):

1. Shows static HTML content
2. Replaces some of the static content using JavaScript
3. Loads an ActiveX component using JavaScript

The problem is that step 2 is always executed after step 3, even though the code to display the ActiveX component is after step 2 (and loading the ActiveX component takes several seconds). Originally, the ActiveX component was loaded traditionally using the object tag, but to solve the problem, I moved the loading to the following function (executed in step 3):

function afterLoadActiveX(){
    var mainForm = document.forms['getupdates'];

    var activeXObject = document.createElement('object');
    activeXObject.setAttribute('id','webagent');
    activeXObject.setAttribute('classid','CLSID:53N50R3D-4246-65Z6-1234-44B989ECA335');
    activeXObject.setAttribute('height','1');
    activeXObject.setAttribute('width','1');
    activeXObject.setAttribute('align','baseline');

    document.body.appendChild(activeXObject);

}

What could I do to change the content using JS so that the change is visible immediately? The afterLoadActiveX is executed in the body onload method, and the JS to change the content (step 2) is executed also in body-onload, before that.

Answer 1

You could call afterLoadActiveX() at the end of the function that changes your DOM.