How to Use Dynamic Web TWAIN with Internet Explorer 11 on Windows 8.1

It’s been a while now since Microsoft released a Windows 8.1 Preview with a Preview of IE 11 too. No doubt many users have already tested it. It is apparent that Microsoft has entirely rebuilt the developer tools and made them much more beautiful and powerful. There are eight distinct tools: DOM Explorer, Console, Debugger, Network, UI Responsiveness, Profiler, Memory, and Emulation. In this article, I will share some of my experiences with the debugger and console tools of IE 11. And I’ll provide a review of a hands-on test on how Dynamic Web TWAIN works with IE 11.

Debugger

IE 11 Debugger

Compared to the debuggers of Chrome and Firefox, the debugger for IE 11 seems much more user-friendly and convenient. The best feature is that I can search for everything globally across different files. Here are some new features of Debugger listed on Microsoft’s website:

  • No-refresh debugging – set your breakpoints and go without reloading and losing your state
  • Tabbed document interface for easier management of multiple scripts
  • Scrollbar that highlights breakpoints and search matches

Console

IE 11 Console

It is now much easier to see errors and warnings with the improved interface. Here are the highlights of the Console tool for IE 11, according to Microsoft:

  • Open the Console at the bottom of any other tool with the Console button or CTRL + `
  • New Console Debugging API methods for timing, counting, grouping, and more
  • IntelliSense auto-completion suggestions on the command line speed up input, reduce typos, and help you discover aspects of JavaScript APIs

Using Dynamic Web TWAIN with IE 11

After a quick look at the Debugger and Console of IE 11 we will now try Dynamic Web TWAIN with it. For those who are not familiar with Dynamic Web TWAIN, it is a scanner programming SDK for interacting with TWAIN scanners in your web application.

I will test IE 11 with the local demo application coming with the 30-day free trial installer of Dynamic Web TWAIN. On running the demo scanning page, we will see a prompt to install the Dynamic Web TWAIN SDK, as shown in the screenshot below:

Install Dynamic Web TWAIN ActiveX control in IE 11

We can then acquire some images from attached scanners or load some existing images from a local disk.

Dynamic Web TWAIN is a client-side scanning SDK and you can use JavaScript to call all its methods/properties. When using the TWAIN control in IE 11, here are some points worth noting to make sure your JavaScript code is compatible with IE 11.

When running JS code, you will find that the user-agent string for IE 11 has been changed compared to previous versions. The user-agent string for IE 11 is “mozilla/5.0 (windows nt 6.3; trident/7.0; touch; .net4.0e; .net4.0c; tablet pc 2.0; rv:11.0) like gecko”, in which you cannot find “msie”. Change this code if you want to make relevant conditional statements work in IE 11.

user agent JS code

AttachEvent method is also abandoned in IE 11. After running this code block, you will find error information displayed in the Console tool.

JS event code

Change the event code like below.

if (DWObject.attachEvent) {
        DWObject.attachEvent("OnOperateStatus", dynamsoftOnOperateStatus);
}
else {
	DWObject.RegisterEvent("OnOperateStatus", dynamsoftOnOperateStatus);
}

With these fundamental changes, you should be able to have Dynamic Web TWAIN functioning within IE 11.

Run or deploy the document scanning application on a web server

You can get the source code of the demo app I use here.

There is a “Scripts\ProductKey.js” file with a trial product key. If you get a license error when running the sample code, you can download Dynamic Web TWAIN from Dynamsoft’s website to get a valid trial license:  Dynamic Web TWAIN 30-Day Free Trial Download