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:

<CustomDOMElements value="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:

<script type='text/javascript' src='' pages='*'/>
<script type='text/javascript' src='' pages='*'/>


Now let us look at tab creation part. Customer needed two tabs each tab has its own url: and, respectively. The startpage of the config.xml has been pointed to nativetabbar.html and the page content is as shown below:





  <script type="text/javascript" charset="utf-8" src="ebapi-modules.js">   </script>

  <script type="text/javascript">


     function create_tabbar()





                              'label':'MainPage', 'action':'', 'useCurrentViewForTab':true


                             label: "abc",

                             reload: false,

                             action: ""



                              label: "abcd",

                              reload: false,

                              action: ""



                         {createOnInit: "true"} ,tabbar_callback );



  function tabbar_callback(params)




  var alreadyloaded = false;

  function loadEvent()


      if(alreadyloaded == false)


          alreadyloaded = true;


          EB.NativeTabbar.switchTab(1); //this will give a feel to user that his start page is tab1 page contents.( in this case)


  function removetabbar()





  window.addEventListener('DOMContentLoaded', loadEvent);




  <body onload="Javascript:loadEvent()" onunload="removetabbar()">

  <button onclick="EB.Application.quit()">Quit</button>




Please note that startpage just creates three tabs tab0, tab1, tab2 respectively and where tab0 is the should be the page which created the tabs as per NativeTabBar documentation. Tab1 and Tab2 are the tabs where user is really interested in and where Tab1 is pointing to google and tab2 is pointing to Yahoo. As you can see, onload event tabs are getting created and we switch to tab1 directly. This gives a feeling to the customer that his start page is google (tab1).


How do we switch to tab2? Here comes the role of DOM injection module. When you switched to Tab1 after creating the tabs, there are two scripts injected to your tab1 (ebapi-modules.js and KeyCap.js, respectively without app developer knowledge). Let us see the contents of KeyCap.js:

(function() {


   // Poll for EB namespace to come into existence
   var checkReady = function(callback){

   if (window.Rho)






      window.setTimeout(function() { checkReady(callback); }, 100); //check here


   // Start polling...
  checkReady(function(Rho) {


     EB.KeyCapture.captureKey(true, "ALL", keyCapCallback);   });




function keyCapCallback(result)


   if(result.keyValue==112) // F1
      EB.NativeTabbar.switchTab(1);//go to google

      EB.NativeTabbar.switchTab(2);//go to yahoo


      EB.NativeTabbar.remove();//remove tabs
      EB.Application.quit();//quit app




Notice that whenever KeyCap.js is loaded on to tab1 or tab2, an anonymous function is getting executed.


EB.KeyCapture.captureKey(true, "ALL", keyCapCallback);

The line of code above registers a keydown callback event on each tab. On pressing any key,  keyCapCallback will be called from EB. Based on the keyValue one can write the logic. On pressing F2 key EB view switches to On pressing F1, EB view will switch back to On pressing F3 key, EB app will quit.


Ultimately the above example will give a feel to user that his start page is Upon pressing F2 key, his view switches to On pressing F1, his view will switch back to On pressing F3, his app will quit. Note that keyboard layout is different on various Zebra devices. Hence keyvalue used here needs to be modified based on the user's device key mapping.


Thus DOM Injection helps user to do tabswitching on button press without modifying his application.


For more details on DOM injection, please refer to the EB DOM Injection Guide.


Sabir Valappil Thattath is a Senior Software Engineer with Zebra Technologies