1 Reply Latest reply on May 2, 2009 8:14 AM by mschutze

    Error when using Javascript to scroll page in iFrame

    mschutze

      Hi again!

       

      I'm using a small Javascript to control the scrolling of a page loaded in an iFrame:

       

      <script type="text/javascript">

       

      var timer_id;
      function scroll_iframe(frm,inc,dir) {
        if (timer_id) clearTimeout(timer_id);
        if (window.frames[frm]) {
          if (dir == "v") frames[frm].scrollBy(0, inc);
          else window.frames[frm].scrollBy(inc, 0);
          timer_id = setTimeout("scroll_iframe('" + frm + "'," + inc + ",'" + dir + "')", 20);
        }
      }

       

      function stopScroll() { if (timer_id) clearTimeout(timer_id); }
      </script>

       

      <a href="javascript:;" onmouseover="scroll_iframe('menu', -4, 'v'); return true" onmouseout="stopScroll(); return true">Up</a>
      <a href="javascript:;" onmouseover="scroll_iframe('menu', 4, 'v'); return true" onmouseout="stopScroll();  return true">Down</a>

       

      Running this results the error: "Adobe AIR runtime security violation for JavaScript code in the application security sandbox (window.setTimeOut)".

       

      I've read the page about "Avoiding security-related JavaScript errors" but I don't know how to implement the changes proposed in my script.

       

      Could anyone be so kind and help me with this?

       

      Thanks!

        • 1. Re: Error when using Javascript to scroll page in iFrame
          mschutze Level 1

          Just wanted to say that I solved the problem...

           

          After long testing I came up with two functions (one for up and one for down) that have the following code at the end:

           

          timer_id = setTimeout(function(){scroll_iframe('up')}, 20); //move up


          timer_id = setTimeout(function(){scroll_iframe('down')}, 20); //move down

           

          I also stumbled on to another problem: if I set the scroll property from the iFrame to "no", so that the scroll bar is hidden, I'm not able to use the "scrollBy(x, y)" method.

           

          So what I did was use "frames['iframe'].document.getElementById('menu_content_div').style.top" to change the position of the content div inside the menu page. I had to put some restrictions so that the user isn't able to scroll the menu endlessly up or down, but then it worked like a charm!

           

          If anyone whants to do something similar, this is the code I ended up with:

           

          var timer_id;
          var position = 0;

           

               function scroll_iframe(direction) {
                  
                  if (timer_id) clearTimeout(timer_id);
                 
                  if (window.frames['iframe']) {
                      if (direction == "up" && position<0) {
                          position += 8;
                          frames['iframe'].document.getElementById('menu_content_div').style.top = position+"px";
                          timer_id = setTimeout(function(){scroll_iframe('up')}, 40);
                      }
                     

                      menuContentDiv = frames['iframe'].document.getElementById('menu_content_div')
                      heightPx = document.defaultView.getComputedStyle(menuContentDiv,null).getPropertyValue('height');
                      heightValue =
          heightPx.slice(0,(heightPx.length-2)); //removes the "px at the end of heightPx
                      height = (heightValue-387)-2*(heightValue-387); //sets how much the menu can scroll up until it gets to its end - depends on the iframe height
                     
                      if (dir == "down" && position>
          height) {
                          position -= 8;
                          frames['iframe'].document.getElementById('menu_content_div').style.top = position+"px";
                          timer_id = setTimeout(function(){scroll_iframe('down')}, 40);
                      }
                  }
               }

           

               function stopScroll() {
               if (timer_id) clearTimeout(timer_id);
               }

           

          -------------------------

           

          Scroll down: onMouseDown="scroll_iframe('down'); return true" onMouseUp="stopScroll(); return true"

          Scroll up: onMouseDown="scroll_iframe('up'); return true" onMouseUp="stopScroll(); return true"