[JavaScript] dynamically add object elements and ActiveX Control event associations on the page

Introduction:

If an object element is displayed on a webpage, it is assumed that it is the OCX ActiveX Control of a document reader. The page declaration is as follows:

<object id="TEST" classid="clsid:AAAAAAAA-AAAA-AAAA-AAAA-AAAAAAAAAAAA" 
width="0" height="0"></object>

If you have not installed this control, the browser will automatically search for it (in IE alone, the same below). If the codebase attribute is declared on the page, it will be automatically downloaded from this link. Unfortunately, if the local device is not installed, the download is not specified, or the download fails, it takes a long wait to tell the user that the loading failed. Sometimes the page is still blank during loading. After a long wait, the user sees a blank page and finally prompts that the loading is not successful. This user experience is poor.

This is the latest project. The project uses several identification card readers and calls the OCX control to trigger Card swipe recognition events for the readers. Since the user will not install all types of reader controls (because it is basically fixed to use a certain model), so the original page declares Multiple object elements, if there are uninstalled controls (even one), the loading of the entire page will be very slow. It takes about 1-2 minutes to complete the loading.

Solution:

When this problem occurs, the first thing that comes to mind is to dynamically create (declare) object Elements Using Javascript DOM Based on the reader type selected by the user after the entire page is loaded. In this way, you can avoid loading unused controls and slow page loading.

Dom creation and addition of elements are not described in detail. But the question is, how to associate element and reader event triggering? The original call part of the control is written in VBScript. After checking the information on the Internet, we found that the event handler name of VB is the Control ID + event name, but it obviously does not work in JavaScript. Later, I found the information on the Internet and said that the associated events under JavaScript are in the form:

<SCRIPT type = "text/JavaScript" for = "Control ID" event = "event processing function name">
// Event handler
Alert ();
</SCRIPT>

[1] "Event-related functions should be placed on ActiveX Control Code; otherwise, Event Notifications cannot be received .", Once tested, you do not need to receive the event, as long as the page has code associated with the event (or if the page is not fully loaded, you need to trigger ActiveX event execution, in this case, it is best to put it before the element Declaration ).

Issues to be resolved

I have also tried to associate events with dynamically created elements using attachevent (other functions are not used in IE) (according to [3]: The event parameters cannot be obtained,I have not verified this conclusion.), The test found that some events were associated successfully, but the events recognized by the reader were not triggered, and other events were triggered. Do not know how to resolve them?

Note:

ActiveX classid can be found in the registry after the ActiveX control is registered. ActiveX events and attributes can be seen through the Visual Studio Object Browser.

Reference:

ActiveX interaction with JS, http://www.cnblogs.com/zdxster/archive/2011/01/27/1945879.html

[2] JavaScript call ActiveX Control event implementation method, http://www.jb51.net/article/22996.htm

[3] how to retrieve ActiveX event return value, http://topic.csdn.net/t/20021018/10/1105929.html