3 Replies Latest reply on Jan 9, 2009 12:47 PM by htmlkman

    Keystrokes in a sandboxed iframe

    htmlkman
      I'm working on an app with AIRMenuBuilder menus and a sandboxed iframe that loads pages from a Web server. Everything works fine as long as I'm not typing in the non-app area (select lists, buttons, and links function properly).

      But as soon as I type (into the input field of a form, for example), AIR grabs my keystrokes and tries to apply them to the menu. How can I get the main app to ignore keystrokes in the iframe?

      Thanks for your suggestions.
        • 1. Re: Keystrokes in a sandboxed iframe
          anirudhs Level 2
          Hi,

          That sounds strange. It would be great if you could submit a simplified sample that isolates the keystrokes to IFRAME being consumed by the main app issue so that we can take a look at it..

          • 2. Re: Keystrokes in a sandboxed iframe
            htmlkman Level 1
            Thanks for your reply. I've posted some snippets below to help explain what's going on.

            Snippet 1 from index.html (creates the menu):

            <script type="text/javascript">
            var root = air.ui.Menu.createFromJSON ("menus/rootmenu.js");
            air.ui.Menu.setAsMenu (root);
            </script>


            Snippet 2 from index.html (creates the iframe):

            <iframe id="contentArea" name="contentArea" bgcolor="white" width="100%" height="98%" src=" http://192.168.x.x/local/ui.html" sandboxRoot=" http://192.168.x.x/local/" documentRoot="app:/sandbox/"></iframe>

            Snippet from rootmenu.js:

            {
            label: "2. Customers",
            mnemonicIndex : 0,
            defaultKeyEquivalentModifiers: "false",
            onSelect : print,
            items : [
            {
            label: "1. Customer Address List",
            mnemonicIndex : 0,
            defaultKeyEquivalentModifiers: "false",
            onSelect : print
            },
            {
            label: "2. Customer Number List",
            mnemonicIndex : 0,
            defaultKeyEquivalentModifiers: "false",
            onSelect : print
            },
            {
            label: "3. Customer Address Labels",
            mnemonicIndex : 0,
            defaultKeyEquivalentModifiers: "false",
            onSelect : print
            },
            {
            label: "4. Customer Addr Labels Active Only",
            mnemonicIndex : 0,
            defaultKeyEquivalentModifiers: "false",
            onSelect : print
            },

            Snippet 1 from print.js (within strignify function, maps menu items to PHP scripts):

            ret.push ([k, " => ", strignify(obj[k])]);
            if(k == 'label'){
            var labelString = strignify(obj[k]);
            switch(labelString){
            case "1. Customer Address List":
            runScript("CustomerAddresses.php"); break;
            case "2. Customer Number List":
            runScript("CustomerNumbers.php"); break;
            case "3. Customer Address Labels":
            runScript("CustomerAddressLabels.php"); break;
            case "4. Customer Addr Labels Active Only":
            runScript("CustomerAddressLabelsActiveOnly.php"); break;

            snippet 2 from print.js (opens PHP script in iframe):

            var baseURL = " http://192.168.x.x/myAppDocRoot/";
            function runScript(scriptName){
            var targetURL = baseURL + scriptName;
            document.getElementById("contentArea").src = targetURL;
            }

            So let's say one of these PHP scripts displays a form in the iframe. When I start typing into a text input field, one of two things will happen: 1) If the character is used as a menu mnemonic, the corresponding menu is launched or 2) If the character is NOT a menu mnemonic, it appears in the text input field, as it should.

            I've implemented a workaround by setting all defaultKeyEquivalentModifiers to true.

            However, that still doesn't explain why AIR is monitoring the keystrokes entered into the iframe. Perhaps there's a better method for changing the iframe's contents, instead of
            document.getElementById("contentArea").src = targetURL;

            Thanks.
            • 3. Re: Keystrokes in a sandboxed iframe
              htmlkman Level 1
              I have another AIRMenuBuilder (AMB) question, and if you think I should put it into a new thread, please let me know:

              Once I've created a root menu with AMB, can I replace it with another? For example, my initial menu has 5 horizontal, top-level items. The first four have submenus, but when the fifth is selected, I'd like to overwrite the initial horizontal menu with a new one.

              The menus are created from JSON files, and the onSelect events are handled by Javascript. Running into the "Adobe AIR runtime security violation for JavaScript code in the application security sandbox," I created a parent sandbox bridge. The value of the new JSON file is successfully passed (and displayed in alerts), but I'm still getting a security violation and the new menu does not appear. Relevant snippets below.

              Thanks again.

              Snippet 1 from index.html:

              <script type="text/javascript">
              var root = air.ui.Menu.createFromJSON ("menus/rootmenu.js");
              air.ui.Menu.setAsMenu (root);

              var bridgeInterface = {};
              var newRootMenu = bridgeInterface.newRootMenu;
              bridgeInterface.newMenu = function(newRootMenu){
              var menuSource = "menus/" + newRootMenu + ".js";
              alert(menuSource); // displays properly, with correct values
              root = air.ui.Menu.createFromJSON(menuSource);
              alert('About to put up a new menu...'); // never displays, security violation must be line above
              air.ui.Menu.setAsMenu(root);
              alert('Well, we tried putting up a new menu, but...'); // never displays
              }

              function engageBridge(){
              document.getElementById('contentArea').contentWindow.parentSandboxBridge = bridgeInterface;
              alert('Bridge is engaged!'); // displays properly
              }
              </script>

              Snippet 2 from index.html:
              <iframe
              id="contentArea" name="contentArea" bgcolor="white" width="100%" height="98%"
              src=" http://192.168.x.x/local/ui.html" sandboxRoot=" http://192.168.x.x/local/"
              documentRoot="app:/sandbox/" ondominitialize="engageBridge()"></iframe>

              Snippet from print.js:

              case "Payroll":
              var menuName = "payrollMenu";
              bridgeInterface.newMenu(menuName);
              break;