The Power of DOM Injection (example with NativeTabBar)
By Sabir Valappil Thattath
In this discussion I would like to bring your attention to the DOM injection module in Enterprise Browser. This feature was introduced in Enterprise Browser (EB) version 1.4 and is supported on both Android and Windows Mobile/CE platforms. DOM Injection was introduced by taking into account that users may need to migrate their app to EB without modification. DOM Injection injects the lists of meta/script/css tags mentioned in a local file to the required pages (refer to DOM injection documentation for syntax). We had heard of a couple of scenarios where our customers could solve their needs using the DOM injection technique. I am taking one scenario as an example.
NativeTabbar methods let you use multiple instances of the webview in separate tabs. On Windows Mobile/CE there are no visible tabs as we see in the case of desktop browsers. Once tabs are created, one should programmatically switch between tabs. The API exposed for switching tab is EB.NativeTabbar.switchTab(nTabIndex) , refer NativeTabBar for more details.
One of our users wanted to use NativeTabBar for his app, however he was not willing to modify his existing application for the tab creation or for switching between tabs. Having a button/href link to switch to a different tab from each tab was looking awkward for the user. Moreover he was worried about modifying his application just for migrating to EB. This was the situation where our team could help the user with DOM injection technique.
DOM Injection has three initialization parts. Firstly a custom tag file placed locally on the device, secondly mentioning custom tag file path in config.xml element named CustomDOMElements, thirdly fill the custom tag file with required tag details (refer to the DOM injection module for more details). Once initialization part is completed your EB is ready to inject those tags to the specified pages.
The below example was validated on MC92 CE7 and should work for all devices:
Below is the CustomDOMElements path mentioned in my example. It says that custom tag file is placed under Application directory folder named EBKeyCaps:
"file://\Application\EBKeyCap\myTags.txt"/>
Below is custom tag file content. It says that the script files named ebapi-modules.js and KeyCap.js should be injected to all pages navigated by EB:
"Javascript:loadEvent()" onunload="removetabbar()">
Edward Correia
